一、同步交互异步交互

1、什么是同步交互

指发送一个请求，需要等待返回，然后才能发送下一个请求

2、什么是异步交互

指发送一个请求，不需要等待返回，随时可以再发送下一个请求

同步交互与异步交互的区别在于：
同步交互需要等待结果，而异步交互不需要等待结果

3、异步交互的优势

用户操作无须像同步交互必须等待结果。
异步交互只需与服务器端交换必要的数据内容，而不是将所有数据全部更新。
异步交互对带宽造成的压力相比同步交互更小。
通过Ajax实现异步交互不需要任何第三方插件，只要浏览器支持JavaScript语言即可实现。

4、异步交互的劣势

异步交互破坏了浏览器原有的前进和后退机制。
如果后面逻辑的执行依靠前面逻辑执行的结果的话，异步交互可能会造成问题。
Ajax实现异步交互对搜索引擎支持较弱。
Ajax实现异步交互会引起一些Web安全问题，例如SQL注入攻击、跨站点脚本攻击等问题。

二、Ajax是什么

Ajax是Asynchronous JavaScript XML的缩写，被译为异步JavaScript和XML

Ajax并不是一个新技术，而是一个在2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技
术集合的“新”方法。

当使用Ajax模型，HTML 页面能够快速地将数据逐步更新显示在用户界面上，不需要重载(刷新)
整个页面。这使得HTML页面能成更快速地对用户的操作进行反馈。
尽管Ajax中的“X”代表XML,但由于、JSON的许多优势，目前JSON的使用比XML更加普遍。
JSON和XML都被用于在Ajax模型中封装数据。

1、AJax涉及的技术

HTML
CSS
JavaScript
DOM
XML
XMLHTTPRequest对象

XMLHTTPRequest对象是实现Ajax异步交互的核心

2、Ajax的工作原理

3、Ajax的核心对象

3.1、实现Ajax异步交互的核心就是XMLHttpRequest对象，该对象为客户端提供了在客户端和服务器之间传输数据的功能。
3.2、XMLHttpRequest对象提供了一个通过URL来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。
3.3、XMLHttpRequest对象最初由微软设计，随后被Mozilla、Apple和Google采纳。如今，该对象已经被W3C组织标准化。通过该对象，可以很容易地得到一个URL上的资源数据。尽管名字里有XML，但XMLHttp.Request对象可以得到所有类型的数据资源，并不局限于XML格式的数据。

三、实现Ajax异步交互

1、实现Ajax的执行步骤

1.1、创建Ajax的核心对象XMLHttpRequest对象

function createXMLHttpRequest() {
    var httpRequest;
    if (window.XMLHttpRequest) { // 适用于Chrome, Firefox, Safari,
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { //适用于IE浏览器
        try {
            httpRequest = new ActiveX0bject("MsxmL2.XMLHTTP"); //IE 7 +
        } catch (e) {
            try {
                httpRequest = new ActiveX0bject("MicrosoftXMLHTTP ") ;// IE 6-
                }
                catch (e) {}
            }
    }
    return httpRequest;
}

1.2、通过XMLHttpRequest对象的open(方法与服务器端建立连接
1.3、构建请求所需的数据内容，井通过XMLHttpRequest对象的send()方法发送给服务器端
1.4、通过XMLHttpRequ lest对象提供的onreadystatechange事件监听服务器端的通信状态
1.5、接收并处理服务器端向客户端响应的数据结果
1.6、将处理结果更新到HTML页面中

2、具体代码过程

2.1创建XMLHttpRequest对象
var xhr = new XMLHttpRequest()
2.2调用XMLHttpRequest对象的open方法

与服务器建立连接
xhr.open('get','http://Localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.htmL?user=zhangwuji&pwd=123456')

/* 
open(method,url)方法
    method:当前的请求方式GET、POST···
    url:当前请求的服务器端地址
*/

2.3调用XMLHttpRequest对象的send方法

将客户端页面数据发送给服务端
xhr.send(null)

/*
send()方法
    如果不传递任何数据，向该方法中写null
*/

/*
向服务器端发送请求数据
send(data)方法
    参数data -表示要向服务器端发送的请求数据
    请求方式：
        1、如果当前的请求方式为GET的话- send() 方法中只能传递null值
        2、将请求数据添加到请求地址链接中

两种情况
*发送数据- user=zhangwuji&pwd=  123456
    *请求数据的格式
        1.如果具有多个请求数据的话，之间使用"&"进行分隔
        2.每个数据格式-> name=value 
    *不发送数据- send() 方法中必须传递null值，而不能为空
*/
//人为方式获取当前的数据，构建成指定的数据格式

2.4利用XMLHttpRequest对象的onreadystatechange事件

用于监听服务器的通信状态 - 存在着处理完毕信号
接受服务器返回的处理结果

xhr.onreadystatechange = function(){//监听服务器端的通信状态
/*
XMLHttpRequest 对象的readyState属性
    作用：表示服务器端的通信状态
    值：
        0 未初始化
        1 open方法被调用
        2 send方法被调用
        3 正在响应
        4 响应已完毕
*/
    if(xhr.readyState === 4){
    /* 
        接受服务器端返回结果
        XMLHttpRequest对象的responseText属性
        作用：用于接受服务器端的响应结果
    */
    console.log(xhr.responseText);
    }
}

四、GET和POST请求方式

GET请求方式

Ajax异步交互使用GET请求的话：

将构建的请求数据添加到open方法中的url地址中
将发送请求数据的send方法中的参数设置为null

/*
    send()方法
        如果是GET，send方法只能传递null 请求数据添加到请求地址中
        如果是POST，send方法传递请求数据
*/

POST请求方式

Ajax异步交互使用POST请求的话：
调用send方法之前，需要通过XMLHttpRequest对象的setRequestHeader方法设置请求头信息

1、httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
2、通过XMLHttpRequest对象的send方法请求数据

Ajax异步交互与跨域访问，Ajax的基本用法