01.ajax基本语法

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");

1. 通过XMLHttpRequest对象发送请求过程中，会发生状态的变化，每个状态变化都会触发XMLHttpRequest对象的onreadystatechange事件

2. 通过XMLHttpRequest对象的readyState属性值判断发生的是什么状态变化（一般判断是否等于4表示服务器返回了数据）

3. 通过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);
	}