AJAX整理

AJAX是Asynchronous JavaScript and XML，异步Javascript与XML。

    注：XML目前可用JSON代替，（AJAJ），但是XML与JSON的特点不同，有不同的应用场景。

 

AJAX是一种使用现有标准的新方法。实现与服务器进行少量数据交互下，不重载整个网页，只刷新部分网页内容的技术方法。动态页面。

 

工作原理：

1. 浏览器根据事件创建一个HttpRequest对象（多为XML或JSON数据），并将该HttpRequest对象根据URL通过网络发送至服务器。
2. 服务器接收到HttpRequest请求，经过view处理后，创建一个response响应（包含响应数据，XML或JSON）并将响应通过网络返回浏览器。
3. 浏览器接收到response响应后，使用javascript解析出数据并通过DOM模型等方式更新网页显示。

 

XMLHttpRequest：

    用于在后台与服务器交换数据。可以同步或异步（open第三个参数为true）的返回web服务器响应。

  功能：

    在不重载加载页面的情况下更新网页

    在页面已加载后从服务器请求数据

    在页面已加载后从服务器接收数据

    在后台向服务器发送数据

  创建方式：

    使用Javascript创建，语法为xmlhttp = new XMLHttpRequest()

  向服务器发送请求：

    xmlhttp.open(method, url, async)  #进行设置

      method:请求类型，”GET”或者”POST”。

             GET:简单且速度更快，小数据量传输。不同浏览器及服务器对长度限制设置不同。

             POST:需对服务器文件或数据库进行操作时。对数据量无限制。当存在未知字符的用户输入时。当选择POST方式时，若要加入HTTP头信息，在open后，使用xmlhttp.setRequestHeader(header, value)方法，向请求加入HTTP。

      url:请求的url路径，参考你web网站上配置的url（不包括ip:port段）

      async:同步还是异步，true表示异步，不必等待服务器响应，程序仍然往下执行；false表示同步，等待服务器响应，可能出现服务器无响应下程序停止问题。

        异步操作时，使用通过定义xmlhttp.onreadystatechange函数，执行当成功加载后的操作。（通过xmlhttp.readState及status属性判断是否成功返回。）

        同步时无需定义，直接按流程执行即可。

　　xmlhttp:send(string)  #将请求发送至服务器

      string:仅用于POST方式

  获取服务器响应

    使用xmlhttp.responseText或者xmlhttp.responseXML属性。

      responseText:获得字符串形式的响应数据

        document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText

    responseXML:获得XML形式的响应数据。

        需要手动解析XML数据成字符串，在使用innerHTML方式刷新页面。

    xmlhttp.readyState:当服务器响应时会更改这个状态值。

        值列表：

         0：请求未初始化

         1：服务器连接已建立

         2：请求已接收

         3：请求处理中

         4：请求已完成，且已完成响应

    xmlhttp.onreadystatechange:当readyState状态改变时，就会调用这个函数。可通过重写该函数来执行相应的响应操作。

    xmlhttp.status:响应返回的状态码

          200：请求已成功。

          404：未找到页面