Ajax
Asynchronous JavaScript And XML
异步:
指一段程序执行时不会阻塞其他程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序 ,相反的则为同步,
自己理解的就是类似百度的搜索框输入内容时的提示相关的内容功能,ajax可以在不刷新整体页面的情况下,进行从后台取值,并返回数据到页面,其优势在于不阻塞程序的运行,从而提升整体上的执行效率。
现实生活中,打电话是同步,发短信是异步
XMLHttpRequest
浏览器内置对象,用于在后台与服务器通信,由此我们可以对页面进行部分更新,更不进行刷新整个页面的操作。
当以post方式请求时候,请求头中设置了“Content-type”,“application/x-www-form-urlencoded”,get方式请求就不需要,
api详解:
xhr.open(); 发起请求,可以是get或者post方式
xhr.setRequestHeader(); 设置请求头
xhr.send(); 发送请求主体,get方式使用null作为主体
xhr.onreadystatechange(){} 监听响应状态
xhr.readyState = 0:UNSENT open尚未启用
xhr.readyState = 1:OPENED open 已调用
xhr.readyState = 2:headers_received 接收到头消息
xhr.readyState = 3:loading 接收到主体
xhr.readyState = 4:done 响应完成
xhr.status 表示响应码 200 为正常
xhr.statusText 表示响应信息
xhr.getAllResponseHeaders() 获得全部响应头信息
xhr.responseText:响应主体
//浏览器兼容处理 undefined未定义的 因为只有ie浏览器中存在这个ActiveXObject对象
if(typeof ActiveXObject !=='undefined'){
alert("ie");
}else{
alert("ii");
}
IE浏览器创建ajax对象:
var xhr = new ActiveXObject("Microsoft.XMLHTTP");//最原始的方式 --
var xhr = new ActiveXObject("Msxm12.XMLHTTP");
var xhr = new ActiveXObject("Msxm12.XMLHTTP.3.0");
var xhr = new ActiveXObject("Msxm12.XMLHTTP.5.0");
var xhr = new ActiveXObject("Msxm12.XMLHTTP.6.0");//维护的最高版本
主流浏览器创建对象(Firefix火狐,Chrome谷歌,safari新浪,opera北欧浏览器,IE7以上)
var xhr = new XMLHttpRequest();
对服务器发起请求:
浏览器方式请求:打开浏览器,输入地址栏,回车发起请求
常用状态码及其含义: 404 没找到页面(not found) 403 禁止访问(forbidden) 500 内部服务器出错(internal service error) 200 一切正常(ok) 304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )
浏览器与服务器建立连接 xhr.open(method, url, asynch); * 与服务器建立连接使用 * method:请求类型,类似 “GET”或”POST”的字符串。 * url:路径字符串,指向你所请求的服务器上的那个文件。请求路径 * asynch:表示请求是否要异步传输,默认值为true(异步)。
简单的小程序 是以 post请求来发送的消息:
functiondd(){//创建对象
varxhr= newXMLHttpRequest();//设置请求行,创建新的http请求
xhr.open("post","/dd/d");//设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求主体,发送请求信息给服务器
xhr.send("a=6&b=9");//接受服务器响应
xhr.onreadystatechange= function(){if(xhr.readyState==4){if(xhr.status==200) {
alert(xhr.responseText);
}
}
}
}
下面是java程序
packagedd;importjava.io.IOException;importjava.io.PrintWriter;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjavax.servlet.annotation.WebServlet;/*by:wzq
time:2017年11月16日*/@WebServlet(name= "d", urlPatterns = { "/d"})public class Dd extendsHttpServlet {private static final long serialVersionUID = 1L;protected voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
String parameter= request.getParameter("a");
System.out.println(parameter);
PrintWriter writer=response.getWriter();
writer.print("dsdsdsdsdsdsdsd");
writer.flush();
}protected voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {this.doGet(request, response);
}
}
下面是get请求方法是的ajax代码。
functiondd(){//创建对象
varxhr= newXMLHttpRequest();//设置请求行,创建新的http请求
xhr.open("GET","/dd/d?a=6666",true);
xhr.setRequestHeader("Content-type","application/json; charset=utf-8");//设置请求主体,发送请求信息给服务器
xhr.send();//接受服务器响应
xhr.onreadystatechange= function(){if(xhr.readyState==4){if(xhr.status==200) {
alert(xhr.responseText);
}
}
}
}