ajax编程之基础详细篇

什么是ajax?

它是异步的JavaScript和XML

	优点:
	页面无刷新，用户的体验感好
    异步通信，刚加快快的通信能力
    减少冗余，减少了对服务器的压力
    基于标准的并且被支持的技术，不需要下载插件和小程序

---

	缺点:
	jax干掉了按钮，也就是对浏览器后退机制进行了破坏
    存在一定的安全隐患
    对浏览器的搜索引擎支持比较弱    
    破坏了程序的异常机制
    无法使用URL直接访问

那么ajxa到底有什么用呢?

1. 对数据的验证

2. 按照需求取得数据

3. 自动更新页面

ajax包含哪些部分

1. 使用css和XML表示

2. 使用DOM模型来交互和动态显示

3. 使用XMLHttpRequest来与服务器进行异步通信(虽然w3c目前没有采纳XMLHttpRequest)

4. 使用JavaScript进行绑定和调用

那么XMLHttpRequest包含哪些属性和方法呢

readyState:  请求状态
     responseText：表示响应体的字符串
    responseXML：表示响应体的XML
    status：请求返回的Http状态码
  	statusText：Http响状态的文本
    onreadystatechange :当处理过程发生变化时候执行下面的函数

    XMLHttpRequest方法：
                        Xml.open()  打开向服务器发送的请求
                        Xml.send()  发送Http请求给服务器

那么如何创建一个ajax呢？步骤如下:

创建XMLHttpRequest
        var xhr = new XMLHttpRequest()
        <!-- 老版的浏览器方法：var xhr = new ActiveXObject("microsoft.XMlHTTP) -->
        <!-- 如果想兼容各个浏览器，可以使用ajax的工具函数 -->
        
        5.2准备请求，初始化XMLHttpRequest,接受三个参数
        xhr.open(method,url,async);

        第一个参数method:get或者post
        get:open('get',demo.pnh?name=tsrot&ag=24,true)
        post:open("post"，"demo.php",true)

        第二个参数URL作为请求发送目标的地址URL

        第三个参数true或者false，代表为异步操作或者不是异步操作

发送请求:

 xhr.send()
        get方式:
                xhr.open("GET",demo.php?name=tsrot&age=24,true);
                xhr.send(null);
        post方式：
                xhr.open("post",demo.php,true);
                xhr.SetRequestHeader("content-type","application/x-wwww-form-urlencoded,charset=utf-8");
                xhr.sen

处理响应：

xhr.onreadyStatechange =function(){
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText);
            }
        }

        onreadyStatechange:当处理过程发生变化时执行下面的函数
        readyState:ajax的处理过程，五个状态分别是0-4
        0：请求未初始化
        1：已经建立了请求，但是没有发送出去
        2：请求已经发送了，正在处理中
        3：请求正在处理中；通常响应中已有的部分数据可以用了，但是服务器还没有完全响应的完成
        4：响应已经完成，可以获取并使用服务器的响应了

        status属性：
                    200： "ok"
                    404:  "未找到网页"
        responseText:获得字符串形式的数据
        responseXML：获得XML形式的数据

        对象转化为JSON格式使用：JSON.stringify
        json转换为对象格式用JSON.parse
        返回值一般为JSON字符串，可以用JSON.parse(xml.responseText)转化为JSON对象
        这里可以看一个案例，从服务器返回的数据是否是JSON格式的数据，如何利用：

        1、首先从XMLHttpRequest对象上取回JSON串，把它转化成真正的JavaScript对象
            使用json.parse(xml.responseText)转化为json对象
        2、遍历得到数组，向DOM中添加新元素
            function example(responseText){
                var saleDiv = document.getElementById("sales");
                var sales = json.parse(xml.responseText);
                for(var i = 0;i<sales.length;i++){
                    var sales=sales[i];
                    var div =document.createElement("div");
                    div.innerHTML = sale.name+sale.sales
                    salesDiv.appendChild(div);
                }
            }

封装例子：

将ajax请求封装成ajax()方法，它接受一个配置对象params
        function ajax(params){
            params = params ||{};
            params.data=params.data||{};
            <!-- 判断是ajax请求还是JSONP请求 -->
            var JSON = params.jsonp ?jsonp(params):json(params)
            <!-- ajax请求 -->
            function json(params){
                <!-- 请求方式默认是get -->
                params.type=(params.type||"get").toUpperCase();
                <!-- 避免有特殊的字符，必须格式化传输数据 -->
                prams.data = formatParams(prams.data);
                var xhr = null;
                <!-- 实例化XMLHttpRequest对象 -->
                    if(windows.XMLHttpRequest){
                        xhr = new XMlHttpRequest
                    }else{
                        <!-- IE6以及以下版本 -->
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
            }

        }

使用实例：

 ajax({
            url:'作为目标地址'，
            type："传输方式"，        //get或者post
            data:{'b',"是否同步"} ，      //true 或者false 
            success：function(res){             //请求成功后调用的函数
                    console.log(json.parse(res));
            },
            error:function(error){}         //请求失败后调用的函数
        })

        这个过程一定一定要记住在脑子里：
            function ajax(url,success,fail){
                <!-- 1.创建连接 -->
                var xhr = null;
                <!-- 实例化对象 -->
                xhr = new XMLHttpRequest()；
                <!-- 连接服务器 -->
                xhr.open("get",url,true);
                <!-- 发送请求 -->
                xhr.send(null);
                <!-- 接受请求 -->
                xhr.onreadystatechange = function (){
                        if(xhr.readyState==4){
                            if(xhr.status==200){
                                success(xhr.responseText);
                            }
                            else{           //也就是失败调用的
                                fail && fail(xhr.status);
                            }
                        }
                }
            }

以上代码有bug或者不足的地方，清告知及时改正哦！