Ajax知识基础

           Ajax知识基础

一、Ajax的简介：Asynchronous JavaScript and XML(异步的 JavaScript 和XML）

①Ajax不是某种语言

②Ajax是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术

③传统的页面（不使用Ajax）如果需要更新内容，必需重载整个网页面（有很多使用Ajax的应用程序案例：新浪微博、Google地图等等。）

二、同步 与 异步

①同步：就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去。

②异步：是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态，当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

异步实现的过程：①运用HTML与CSS来实现页面，表达信息；

                            ②运用XMLHttpRequest和web服务器进行数据的异步交换；

                           ③运用JavaScript操作DOM，实现动态局部刷新。

三、Ajax—创建XMLHttpRequest对象

（1）什么是XMLHttpRequest对象？

         XMLHttpRequest对象用于在后台与服务器交换数据。

（2）创建XMLHttpRequest对象

         所有现代浏览器（IE7+、Firefox、Chrome、Safari以及Opera)均内建XMLHttpRequest对象。

（3）创建XMLHttpRequest对象的语法：

         var xhr = new XMLHttpRequest();

        老版本的Internet Explorer（IE5和IE6）使用ActiveXObject对象

            var xhr = new ActiveXObject("Microsoft.XMLHTTP");

           为了应对所有的现代浏览器，包括IE5和IE6 ，请检查浏览器是否支持XMLHttpRequest对象；如果支持，则创建XMLHttpRequest对象。如果不支持，则创ActiveXObject;（兼容性的处理）

        

四、Ajax—服务器发送请求

（1）向服务器发送请求，我们使用XMLHttpRequest对象的open（） 和 send（）方法

     ①open（method，url，asyns）规定请求的类型、URL 以及是否异步处理请求。

          参数说明：

          method：请求的类型；GET 或 POST

          url：文件在服务器上的位置

          async：true（异步） 或 false（同步）

    ②send (string):将请求发送到服务器

           参数说明：string 仅用于POST请求

        

   （2）一个简单地GET请求：

          xhr.open("GET","/Ajax02/getInfor",true)

          xhr.send();

   （3）一个简单地POST请求：

          xhr.open（"POST","/Ajax02/getInfor",true)

          xhr.send();

五、响应头

（1）如果需要像HTML表单那样提交post数据，需要使用setRequestHeader（）来添加HTTP头，然后在send（）方法中规定您希望发送的数据；

（2）setRequestHeader语法：

          setRequestHeader(header,value):向请求添加HTTP头

             参数说明：

             header：规定头的名称

             value:规定头的值

        

六、Ajax服务器响应

使用XMLHttpRequest对象的responseText或responseXML属性获取来自服务器的响应

① responseText：获得 字符串 形式的响应数据。

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

七、Ajax onreadystatechange事件

在XMLHttpRequest对象中，readyState属性存有XMLHttpRequest的状态信息， 每当readyState改变时，就会触发onreadystatechange事件。

八、下面是XMLHttpRequest对象的三个重要属性：

（1）onreadystatechange：存储函数（或函数名），每当readyState属性改变时，就会调用该函数

（2） readyState：存有XMLHttpRequest的状态。从0到4发生变化。

        0：请求未初始化

        1：服务器连接已建立

        2：请求已接收

        3：请求处理中

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

（3）status：  200：”OK” ;   400:未找到页面

       在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备

      当readyState等于4且status为200时，表示响应已就绪；

    

九、通过XMLHttpRequest对象向我们的控制器中提交表单数据

（1）post的提交方法一:①此方法需要拼接一个串，如下图；

                                       ②需要设置响应头，如下图；

（2）post的提交方法二:需要创建FormData()对象，创建之后通过append（）以键值对的形式传入参数