AJAX的学习使用

• 优点 1.页面不刷新的情况下修改数据 2.异步通信，响应快 3.建奇功服务器负担
• 缺点 1.浏览器back失效，对浏览器返回功能造成破坏 2.有安全隐患 3.对搜索引擎支持差 4.无法用URL直接访问

常用场景

• 登录注册数据验证(用户不存在或者已经存在)
• 下拉搜索数据提示
• ......

利用原生JS来写一个AJAX方法

1.首先，先创建一个变量用来储存XMLHttpRequest对象

var http = null;
复制代码

2.创建XMLHttpRequest对象

http = new XMLHttpRequest();
复制代码

3.利用open(...)方法进行配置

open方法有三个参数，分别是

• method （请求方式）
• url （请求地址）
• async （是否异步） 第一个参数设置其请求方式，如常见的GET和POST，第二个参数设置URL，可以是后台文件路径也可以是网络地址。第三个是问你是否需要异步请求，这里一般建议true，毕竟ajax其作用就是异步获取数据。

http.open('GET' , '/api/test.php?name=wang' , true);
复制代码

如果为POST提交的话，那么需要设置请求头部，在把参数设置在sen();中

http.open('POST','/api/test.php',true)
http.setRequestHeder(xxxxx格式);
http.send('name=wang');
复制代码

4.通过XMLHttpRequest,send()提交

http.send();
复制代码

5.对服务器响应做处理

提交请求后，我们可以通过onreadystatechage去监测响应，看下是否成功，readyState一共有五个状态，到达4的时候说明相应内容已经解完成了，也可以通过XMLHttpRequest.onload来代替，当等于4时，通过status获取状态码。

http.onload = function (){
  if(http.status === 200){
    console.log('ajax yes!');
  }else{
    console.log('ajax no!')
  }
}
复制代码

状态码详解

封装ajax方法

/**
    /**
     * ajax封装，参数传递一个对象
     * url : 请求地址
     * type : 请求方式
     * dataType : 请求值返回值
     * data : 参数对象
     * async ： 异步
     * success : function 成功函数 => 参数是响应内容
     * error : function 异常函数 => 参数内容是响应码
     **/
    var ajax = function (obj) {
        //默认传入一个对象,如果没有，就为空对象
        obj = obj || {};
        //默认GET请求
        obj.type = (obj.type || 'GET').toUpperCase();
        //默认返回JSON数据
        obj.dataType = obj.dataType || 'JSON';
        //默认异步请求
        obj.async = obj.async || true;
        //参数处理,执行getParams方法
        var data = getParams(obj.data);
        var http;
        /**
         * 创建AJAX的实例适配
         * W3C使用XMLHttpRequest
         * IE使用ActiveXObject('Microsoft.XMLHTTP');
         * */
        if (window.XMLHttpRequest){
            //w3c
            http = new XMLHttpRequest();
        }else {
            //IE
            http = new ActiveXObject('Microsoft.XMLHTTP');
        }
        /**
         * 请求方式的封装
         * GET和POST请求
         * */
        if (obj.type === 'GET'){
            http.open("GET",obj.url+'?'+data,obj.async);
            http.send();
        }else if (obj.type === 'POST'){
            http.open('POST',obj.url,obj.async);
            //设置头部参数
            http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //提交post数据
            http.send(data);

        }
        /**
         * 监听响应接口
         * 如果步骤4的请求状态码为正确的就执行success函数
         * 如果错误的话就执行error函数
         * */
        http.onreadystatechange = function () {
            if (http.readyState === 4){
                //如果响应内容完成了，判断状态码
                var status = http.status;
                if (status >= 200 && status < 300){
                    //回调
                    obj.success && obj.success(http.responseText,http.responseXML);
                } else {
                    obj.error && obj.error(status);
                }
            }
        };
    };
    /**
     * 对象参数的处理
     * 转换成为需要的字符串
     */
    function getParams(data) {
        var arr = [];
        for (var param in data){
            arr.push(encodeURIComponent(param) + '=' +encodeURIComponent(data[param]));
        }
        console.log(arr);
        arr.push(('randomNumber=' + Math.random()).replace('.'));
        return arr.join('&');
    }
复制代码

jQuery的AJAX封装方法

jQuery封装的ajax的使用 GET

$.ajax({
	type:'get',
	url: "url",
	data:{'foo':'bar'},
	success: function(res) {
	    load_content(res);
	}
});	
复制代码

POST

$.ajax({
    url: "url",
    success: function(res) {
    //设置到页面上
    console.log(typeof res);
    }
});
复制代码

jquery的ajax原理也相对差不多，它给开发者处理了非常多的兼容性问题，大大优化了开发者在写ajax造成的代码重复。。。。。。。。。。