Ajax 小结-02

Ajax 请求响应过程分析

*所有的Ajax 请求都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新
*Ajax应用的编程步骤:
第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)

var xhr=new XMLHttpRequest();

第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。

xhr.onreadystatechange=function(){                     if(xhr.readyState==4&&xhr.status==200){            document.getElementById("resultId").
    innerHTML= xhr.responseText;            
    }           
}

*readyState==4表示服务端的响应结果在客户端已经接收完了
*status==200表示服务处理请求的过程中没有出现任何异常(响应的都是正常数据)

第三步：创建与服务端的连接

xhr.open("GET",`doCheck?name=${name}`,true)

*doCheck?name=${name}--是所要连接服务端的网址
第四步：发送异步请求实现与服务端的通讯

xhr.send(null);

*构建参数对象
方式1：

    var params="name="+name;//淘汰

方式2：

    const params=`name=${name}`;//一种新的写法,这种写法称之为模板字符串,所有字符串拼接都可以以这种方式进行实现

方式3：

    var params={"name":name};//JavaScript中的对象(原生ajax方式不可以直接传递这样的对象)
    

*JavaScript中的对象特性
封装特性：
JS中的对象用于封装属性和方法

继承特性：
JS中为了实现属性或方法的可重用性,提供需要借助Prototype对象去实现的方式（继承机制）

多态特性

• 基于构造函数创建对象
  结构相同(属性名、方法名相同,属性值不同)的多个对象在定义时，可以将结构封装到构造方法
  构造函数尽量不要定义函数--因为构建对象时，构造函数内部的函数还要开辟新的空间