关于Ajax 指的是异步 (Asynchronous JavaScript and XML) <异步的javascript和XML> 

1、 Ajax并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术 

2、 Ajax并不是最新的编程语言，而是一种使用现有标准的新方法  它用于创建更好更快以及交互性更强的 Web 应用程序的技术。

3、 Ajax是能在不重新加载整个页面<无需刷新！>的情况下,能与服务器交换数据并更新网页内部分内容.  

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术.简而言

之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户(不必造成重新加载页面便与WEB服务器

交换数据 可以让网页从后台服务器请求少量的信息而不是加载整个页面)使得因特网的应用程序更加小,速度更快,更加友好 ，同时需

要 注意 的是Ajax是被所有主流浏览器支持的，而且Ajax程序独立于浏览器和平台。                                                                 

 

Ajax  的异步(无阻断 )和同步(阻断  一步一步进行 上一步没有完成 下一步就不继续)

同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。

异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。

 

Ajax适合使用的应用场合有

 

*使用Ajax进行数据验证(用户登录名和密码是否正确和唯一性)   

优点:不像传统的验证数据需要填写完数据后向后台服务器提交表单数据,进入到服务器端进行验证,整个过程时间长且对后台服务器

造成不必要的负担         当使用了Ajax技术是直接由XMLHttpRequest对象发出验证请求，根据返回的HTTP   响应判断验证的数据是

否符合，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，非常的快速且不增加服务器的负担。

 

*使用Ajax更新页面的部分内容 在无需刷新的情况下 , 可更新多条甚至是版块的内容 ，如股票的更新  如百度搜索 无需确定 只需要

在搜索框写入搜索的内容 下方变自动更新内容 <减少向服务器的请求>

 

*网页小游戏(联网的)、新浪微博 、Google 地图、开心网.

 

服务器：能提供一定服务的特殊电脑.ftp、svn、web

网页浏览过程分析：请求 到服务器读取 返回数据 下载到本地浏览器看到
如何配置自己的服务器程序（wamp）
安装一个wamp集成环境，因为Ajax是读取服务器上面的信息的，所以我们接下来的页面需要保存到www目录下：比如我创建一个文件aa.html放到该目录下。我可以通过浏览器输入下面的信息找到这个文件:

loclhost/aa.html

127.0.0.1/aa.html

 

 

使用Ajax

基础：请求并显示静态TXT文件

字符集编码

缓存、阻止缓存

动态数据：请求JS（或json）文件

eval的使用

DOM创建元素

局部刷新：请求并显示部分网页文件

 

HTTP请求方法
GET——用于获取数据（如：浏览帖子）：不安全，放到url里面传递信息，通过网址传递.容易出错.因为有大小限制：4-10k,有缓存 只能传输字符串

POST——用于上传数据（如：用户注册）：稍微安全一些，不通过网址url，可以传大文件，2G，没有缓存

GET、POST的区别

get是在url里传数据：安全性没有post好、容量限制 、并且浏览器本地有缓存

 

 

 

编写Ajax函数的步骤:

1、创建Ajax对象

ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest()

2、连接服务器（打开和服务器的连接）open('方法','url',异步处理)

open(方法, 文件名, 异步传输)

同步和异步

3、发出请求

send()

4、接收返回

请求状态监控

onreadystatechange事件 ：当状态码改变时触发  :on readystate change 

 readyState属性：请求状态

0 （未初始化）还没有调用open()方法
1 （载入）已调用send()方法，正在发送请求
2 （载入完成）send()方法完成，已收到全部响应内容
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了

status属性：HTTP状态码   请求结果     服务器端的状态   找到成功返回>200      未找到错误 返回:>404  

lresponseText  ：请求到的文本,字符串

封装的js代码如下:

[html] view plain copy
  1. // 封装ajax()方法  
  2. function ajax(url,fnSucc,fnFaild){  
  3.     //1、创建Ajax 对象  
  4.     if(window.XMLHttpRequest)  
  5.     {  
  6.         var oAjax=new XMLHttpRequest();                     //声明 兼容除IE6外  所有主流浏览器  
  7.     }  
  8.     else  
  9.     {  
  10.         var oAjax=new ActiveXObject("Microsoft.XMLHTTP");   //声明 兼容IE6   内置的 微软的 插件  
  11.     }  
  12.       
  13.     //2、连接服务器(打开连接服务器)  
  14.     //  open(method,url,async)  
  15.     //  method ：请求的类型；GET 或 POST  
  16.     //  url ：文件在服务器上的位置  
  17.     //  async ：true（异步）或 false（同步）  
  18.     oAjax.open('GET',url,true);  
  19.       
  20.     //3、发送请求  
  21.     oAjax.send();  
  22.       
  23.     //4、接受请求  
  24.     oAjax.onreadystatechange=function (){          //存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。  
  25.         /** readyState状态含义  
  26.          *  0: 请求未初始化  
  27.             1: 服务器连接已建立  
  28.             2: 请求已接收  
  29.             3: 请求处理中  
  30.             4: 请求已完成，且响应已就绪  
  31.          */  
  32.         if(oAjax.readyState==4){  
  33.             /** status  状态含义  
  34.                 200: "OK"    成功  
  35.                 404: 未找到页面  出错  
  36.              */  
  37.             if (oAjax.status==200) {  
  38.                 //alert('成功了！'+Ajax.readyState);   //responseXML  获得 XML 形式的响应数据。  
  39.                 fnSucc(oAjax.responseText);          //responseText 获得字符串形式的响应数据。  
  40.             }   
  41.             else{  
  42.                 //alert('失败了');  
  43.                 if(fnFaild){  
  44.                     fnFaild  
  45.                 }  
  46.             }  
  47.         }  
  48.     };  
  49. }  
  50.       
  51.       


ajax(url,fnSucc,fnFaild)函数参数介绍：
url：读取文件的路径，可以写相对路径或绝对路径（服务器上面的文件名都不能用中文命名）
fnSucc:成功返回信息
fnFaild:失败返回信息

 

HTML页面使用方法 代码如下:

 

[html] view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>无标题文档</title>  
  6. <script src="ajax.js"></script>  
  7. <script>  
  8. window.onload=function ()  
  9. {  
  10.     var oBtn=document.getElementById('btn1');  
  11.       
  12.     oBtn.onclick=function ()  
  13.     {  //阻止缓存方法：缓存是根据URL来存储的。只要url在变，就可以了。在路径那里加上get数据。getTime()是毫秒数  
  14.         //第二种阻止缓存方法: 声明全部变量num = 0; 在路径后面加'aaa.txt?='+(num++) 递归  
  15.         ajax('aaa.txt?t='+new Date().getTime(), function (str){  
  16.             alert(str);  
  17.         }, function (){  
  18.             alert('失败');  
  19.         });  
  20.     };  
  21. };  
  22. </script>  
  23. </head>  
  24.    
  25. <body>  
  26. <input id="btn1" type="button" value="读取" />  
  27. </body>  
  28. </html>  

上面是获取txt里面内容的，如果想获取数组和json的内容。方法如下：ajax读取的到的都是字符串，要用函数eval()函数
读取数组：

 

[html] view plain copy
  1. [1,2,3,4,5,6,7]  

 

[html] view plain copy
  1. <script src="ajax.js"></script>  
  2. <script>  
  3. window.onload=function ()  
  4. {  
  5.     var oBtn=document.getElementById('btn1');  
  6.       
  7.     oBtn.onclick=function ()  
  8.     {  
  9.         ajax('arr.txt?t='+new Date().getTime(), function (str){  
  10.             var arr=eval(str); //eval  eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。  
  11.             alert(arr[3]);     //数组加下标  
  12.         }, function (){  
  13.             alert('失败');  
  14.         });  
  15.     };  
  16. };  
  17. </script>  

读取json：

[html] view plain copy
  1. [{a: 5, b: 7}, {a: 8, b: 12}]  
[html] view plain copy
  1. <script src="ajax.js"></script>  
  2. <script>  
  3. window.onload=function ()  
  4. {  
  5.     var oBtn=document.getElementById('btn1');  
  6.       
  7.     oBtn.onclick=function ()  
  8.     {  
  9.         ajax('arr2.txt?t='+new Date().getTime(), function (str){  
  10.             var arr=eval(str);  
  11.             alert(arr[0].a); //数组的下标  点a是代表下标里面的变量名  那个变量的值  
  12.         }, function (){  
  13.             alert('失败');  
  14.         });  
  15.     };  
  16. };  
  17. </script>  

 

<案例>读取的json放大ul里面：

[html] view plain copy
  1. [{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]  
[html] view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>无标题文档</title>  
  6. <script src="ajax.js"></script>  
  7. <script>  
  8. window.onload=function ()  
  9. {  
  10.     var oBtn=document.getElementById('btn1');  
  11.     var oUl=document.getElementById('ul1');  
  12.       
  13.     oBtn.onclick=function ()  
  14.     {  
  15.         ajax('data.txt?t='+new Date().getTime(), function (str){  
  16.             var arr=eval(str);  
  17.               
  18.             for(var i=0;i<arr.length;i++)  
  19.             {  
  20.                 var oLi=document.createElement('li');  
  21.                   
  22.                 oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>';  
  23.                   
  24.                 oUl.appendChild(oLi);  
  25.             }  
  26.         }, function (){  
  27.             alert('失败');  
  28.         });  
  29.     };  
  30. };  
  31. </script>  
  32. </head>  
  33.    
  34. <body>  
  35. <input id="btn1" type="button" value="读取" />  
  36. <ul id="ul1">  
  37. </ul>  
  38. </body>  
  39. </html>  




 

传统开发模式: (不使用 Ajax) 如果需要更新内容，会触发一次返回服务器HTTP的请求  必需重载整个网页面 服务器做出处理后，返回一个html页面给用户

Ajax开发模式：页面将用户的操作通过ajax引擎与服务器进行通信，将返回的结果给ajax引擎，然后ajax将数据插入指定位置。

 

如下是对比图: