AJAX请求是异步执行的,也就是说,要通过回调函数获得响应。
在现代浏览器上写AJAX主要依靠XMLHttpRequest对象:
var request = new XMLHttpRequest();
对于低版本的IE,需要换一个ActiveXObject对象(一般不在使用):
var request = new ActiveXObject('Microsoft.XMLHTTP');
如果你想把标准写法和IE写法混在一起,可以这么写:
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
通过ajax发送get请求
ajax接收到json数据一定要通过JSON.parse()进行解析成json数据,且servlet响应中要设置MIME,说明发送的是json数据
// 如果要返回json数据,那么对应的MIME要为 application/json
resp.setContentType("application/json;charset=utf-8");
-
通过XMLHttpRequest对象发送请求过程中,会发生状态的变化,每个状态变化都会触发XMLHttpRequest对象的onreadystatechange事件
-
通过XMLHttpRequest对象的readyState属性值判断发生的是什么状态变化(一般判断是否等于4表示服务器返回了数据)
-
通过XMLHttpRequest对象的status属性值判断服务器响应的状态码如(200,404等)
var request = new XMLHttpRequest();
/**
* request在整个请求的过程中,会发生状态的变化,每一个状态变化的时候都会触发该方法调用,
* 是浏览器内部自己去给我们触发, 那么在何时会被触发:
* 1. 当request.open()方法被调用的时候会被触发,request的readyState状态值为 1
*/
request.onreadystatechange = fuction(){
/**
// 当request.open() 那么readyState的状态变为1
if(request.readyState == 1) {
console.log('==========================')
}
// 当readyState为2的时候,表示已经和服务器建立了连接, 数据以发送
if(request.readyState == 2) {
console.log('******************')
}
// 当readyState为3的时候,表示正在获取数据中
if(request.readyState == 3) {
console.log('&&&&&&&&&&&&&&&&********')
}
*/
/**
* 1. 当服务器端返回数据了,readyState的值为4,但是只能表示服务器返回了数据,可能这个数据不是正确的。
* 例如我们看到的404、500页面,其实也是服务器给我们响应了,但是并不是我们想要的数据。
* 2.当request的status为200的时候,表示返回的数据是正确的数据。
*/
if(request.readyState == 4 && request.status == 200) {
// 通过 request.reponseText获取响应会的数据
console.log(request.responseText)
}
}
/**
* 初始化请求:
* 1.第一个参数是请求的方式。
* 2.第二参数是url地址(请求地址)。
* 3.第三个参数boolean的值,true和false.
* true表示按照异步的方式来实现, 不写默认为true, 通常不写。
* false表示按照同步的方式来实现。
*/
request.open('GET', 'http://localhost:8081/day52_web_people_war_exploded/ajax?username=zhangsan', true);
// 向服务器发起请求
request.send();
通ajax发送post请求
使用ajax发送post请求需要设置请求头信息
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
请求参数通过send()添加
request.send('username=张安&password=123456&gender=M')
var request = new XMLHttpRequest();
request.onreadystatechange = fuction(){
/**
* 1. 当服务器端返回数据了,readyState的值为4,但是只能表示服务器返回了数据,可能这个数据不是正确的。
* 例如我们看到的404、500页面,其实也是服务器给我们响应了,但是并不是我们想要的数据。
* 2.当xhr的status为200的时候,表示返回的数据是正确的数据。
*/
if(request.readyState == 4 && request.status == 200) {
// 通过 request.reponseText获取响应会的数据
console.log(JSON.parse(request.responseText))
}
}
/**
* 初始化请求:
* 1.第一个参数是请求的方式。
* 2.第二参数是url地址(请求地址)。
* 3.第三个参数boolean的值,true和false.
* true表示按照异步的方式来实现, 不写默认为true, 通常不写。
* false表示按照同步的方式来实现。
*/
request.open('post', 'http://localhost:8081/day52_web_people_war_exploded/ajax');
// 对于POST来讲,请求头中需要加上如下的信息,可以通过写一个测试表单, 搞一个post请求,通过调试的方式看出来。
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// post请求与get请求携带参数的方式是不一样的, 需要将请求的参数放到send中
request.send('username=张安&password=123456&gender=M')
ajax动态处理get请求或post请求,同时运用了js的方法回调方法
/*ajax
* 第一个参数为: url
* 第二个参数为:ajax请求的方式(get或post)
* 第三个参数为:对ajax请求成功后,数据的处理方式(方法)
*/
function ajax(url,method,handleMethod) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if(request.readyState == 4 && request.status == 200){
var str = request.responseText;
var _data = JSON.parse(str);
handleMethod(_data);
}
}
if(null == method || ''==method){
request.open("get",url);
}else{
request.open(method,url);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
request.send();
}
//处理数据的方法
function handleMethod(_data){
console.log(_data);
}