AJAX技术

一、什么是AJAX

AJAX（Asynchronous Javascript And XML）是指一种创建交互式网页应用的网页开发技术

AJAX是一种用于创建快速动态网页的技术，在无需重新加载整个网页的情况下，能够更新部分的网页

优点：页面无刷新，用户体验非常好

基于标准化的并被广泛支持的技术，不需要下载插件或者小程序

AJAX可使因特网应用程序更小、更快，更友好

减小服务器的压力和带宽，把一部分的逻辑运算转嫁到客户端，利用客户端多余的cpu的处理能力

二、AJAX工作原理

http://www.jb51.net/article/90528.htm

三、实现AJAX的基本步骤

1创建XMLHttpRequest对象，也就是创建一个异步调用对象

    var xml = new XMLHttpRequest();

2创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息

    xml.open(method,URL,flag);

       method:发送请求的方法，有五种：get,post,head,put,delete五种

       URL:指定HTTP请求的URL地址

       flag:可选，该参数为布尔值，设置ajax是否开启异步请求，true表示开启，false表示不开启。默认为true;

3获取响应HTTP请求状态变化的函数

      xml.onreadystatechange =函数名;

        注意：这里调用函数不要用小括号。

      定义函数

         function函数名(){

if(xml.readyState == 4){

//设置获取数据的语句

}

         }

         xml.readyState获取AJAX请求的状态码

0表示未初始化状态

1表示初始化状态

2表示发送数据状态

3表示接收数据状态

4完成状态

4发送HTTP请求

   xml.send(null)

     如果是get请求，则send内为空，如果是post请求，则send是需要传递的参数

5获取异步调用返回的数据

    xml.responseText

 

6使用JavaScript和DOM实现局部刷新。

四、完整的ajax语句

      var xml = new XMLHttpRequest();

      xml.open(“method”,”url”);

          如果method是post请求，在此处要加上下面这段话

          xml.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);

      xml.send(null);

          如果是post请求，send里面需要写入要传递的参数

      xml.onreadystatechange = function(){

         if(xml.readyState==4 && xml.status == 200){

               document.getElementById(“ID名”).innerHTML = xml.responseText;

         }

      }

五、jq中ajax五种格式：

   1. getJSON格式：

      $.getJSON(url,data,function(msg){

          代码段

      })

      url:提交地址

      data:需要传递的数据

      msg:接收服务器处理的结果

   2. get格式：

       $.get(url,data,function(msg){

          代码段

       },json)

   3. postJSON格式：

       $.postJSON(url,data,function(msg){

          代码段

        })

   4. post格式

      $.post(url,data,function(msg){

          代码段

      },json)

   5.通用格式

      $.ajax({

         url:请求地址

         data:发送数据

         type:请求类型: GET POST

         datatype:返回数据类型:JSON

         [async:是否异步] 默认开启异步（true），false（关闭异步请求）

         success:function(msg){

         }

         error: function(){

             提示信息

 

   或者执行代码

         }

      })

五、each处理数组或对象

格式：$.each(arrayObject,function(k,v){

 

})