Ajax手写代码应知应会

2019独角兽企业重金招聘Python工程师标准>>>

一、什么是Ajax？

Ajax是几个单词首字母的缩写：Asynchronous(异步的)Javascript And Xml。它不是一种全新的技术，而是整合了几种现有的技术：Javascript、XML和CSS

我们通过Javascript的XMLHttpRequest对象完成发送请求到服务器并获得返回结果的任务，然后用js更新局部的网页，xml一般用于请求数据和响应数据的封装，CSS用于美化页面样式

 

二、传统的web开发技术和Ajax技术有什么不同？

无论使用哪种开发技术，流程都是先由客户端发送HTTP请求，然后由服务器对请求生成响应，二者存在很多差异

1、  发送请求方式不同：传统web应用通过提交表单方式发送请求，而Ajax技术通过javascript的XMLHttpRequest对象发送请求

2、  服务器响应不同：传统web应用服务器的响应是一个完整的页面，而采用Ajax技术后，服务器响应只是需要的数据

3、  客户端处理的响应方式不同：传统的web应用发送请求后，浏览器将等待服务器响应完成后重新加载整个页面，而采用Ajax技术后，浏览器不再等待请求的响应，而只是动态更新页面中需要更新的部分

 

三、XmlHttpRequest的常用方法

1、Open（method，URL，async）：建立于服务器的连接，method参数指定请求的HTTP方法；URL参数指定请求的地址；async参数指定是否使用异步请求，其值为true或false[Firefox中无响应]

2、send(content)：发送请求，content参数指定请求的参数

3、setRequestHeader(header,value)：设置请求的头信息

经验：当XMLHttpRequest的send（）方法不配置参数，即xmlHttpRequest.send()时，在IE中能够正常运行，但在Firefox中却不能，所以建议最好加上null

 

四、XmlHttpRequest的常用属性

1、onreadystatechange：指定XMLHttpRequest对象的回调函数。onreadystatechange属性的作用与文本框的onblur等属性一样，是事件处理属性，即当XmlHttpRequest的状态发生改变时，XmlHttpRequest对象都会触发onreadystatechange所指定的函数

2、readyState：XmlHttpRequest的状态信息。

有5种状态：

u       0：XmlHttpRequest对象没有完成初始化，此时已经创建一个XmlHttpRequest对象，但是还没有初始化；

u       1：XmlHttpRequest对象开始发送请求，此时代码已经调用open()方法并且XmlHttpRequest已经准备好把一个请求发送到服务器；

u       2：XmlHttpRequest对象的请求发送完成，此时已经通过send方法把一个请求发送到服务器端，但是还没有收到一个响应

u       3：XmlHttpRequest对象开始读取响应；此时已经接收到HTTP响应头部信息，但是消息提部分还没有完全接收结束

u       4：XmlHttpRequest对象读取响应结束，此时响应已经被完全接收

 

 

3、  status：HTTP的状态码。仅当readyState的值为3或4时，status属性才可用

HTTP常用的状态码及其含义如下：

200：服务器响应正常

400：开始找到请求的资源

403：没有访问权限

404：访问的资源不存在

500：服务器内部错误

 

4、  responseText：获得响应的文本内容

注意：当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3时，响应中包含还未完成的响应信息。当readyState为4时，responseText包含完整的响应信息

 

5、  responseXML：获得响应的XML文档对象

注意：如果readyState的值不为4，那么responseXML的值为null。当responseXML接收完整的响应时，如果Conent-Type指定的MIME类型不包含text/xml或application/xml，或以+xml结尾之一的MIME类型，那么responseXML的值为null。

 

五、使用Ajax技术实现异步交互的步骤如下：

       1、使用JS DOM技术获得页面数据

       2、将处理好的数据通过XmlHttpRequest发送给服务器

       3、服务器处理数据

       4、处理结果，使用JS DOM更新页面数据

(function (window) {
'use strict';
    ///XMLHttpRequest请求状态
    var ReadyStateType = {
        UNSENT: 0, //open()尚未调用
        OPENED: 1, //open()已调用
        HEADERS_RECEIVED: 2, //接收到头信息
        LOADING: 3, //接收到响应主体
        DONE: 4 //响应完成
    },

	///表头列表
    mimeType = {
        'form': 'application/x-www-form-urlencoded',
        'json': "application/json"
    },

    XHP = new XMLHttpRequest(),
     Ajax = function () {

     };
	 

    Ajax.prototype.encodeFormData = function (data) {
		///<summary>
		///		1：将名/值对象编码成application/x-www-form-urlencoded格式
		///		2：string encodeFormData(object data)
		///</summary>
        if (Array.isArray(data) || !data) {
            throw new Error(":" + "data");
        }
        var valus = [];
        for (var item in data) {
            var value = data[item].toString();
            var key = item.toString();
            valus.push(key + "=" + value);
        }

        return valus.join("&")
    };

    Ajax.prototype.ajax = function (option) {
		///<summary>
		///		1：void ajax(option)
		///</summary>
        try {
		
            XHP.open(option.type || "get", option.url);
            XHP.onreadystatechange = function () {
                if (XHP.readyState == 4 && XHP.status == 200) {
				///responseText 取回服务器的数据
                    option.success(XHP.responseText, XHP.statusText, XHP);
                }
            }
            // alert(ContentType[(type || "form")]);
            XHP.setRequestHeader("Content-Type", mimeType[option.mimeType || "form"]);
            //            XHP.send(this.encodeFormData(option.data));
            var json = JSON.stringify(option.data);

            XHP.send(json);
        } catch (erro) {
            throw new Error(erro.ToString());
        }

    };
	

    Ajax.prototype.post = function (url, data, callback, type) {
        ///<summary>
        ///  通过POST请求数据
        ///</summary>
        ///<param type="String" name="url">发送请求地址</param>
        ///<param type="Object" name="data">待发送 Key/value 参数</param>
        ///<param type="Function" name="callback">发送成功时回调函数</param>
        ///<param type="String" name="[type]">返回内容格式，xml, html, script, json, text, _default</param>
                       this.ajax({
                           type: "POST",
                           url: url,
                            success: callback,
                           data: data
                        }); 
        var json = JSON.stringify(data);

        $(function () {
            $.ajax({
                type: "POST",
                data: json,
                url: url,
                success: callback
            });
        });
    };


    window.Ajax = Ajax;
} (window));

转载于:https://my.oschina.net/linyuanxiao/blog/215588