小白浅谈Ajax基础

小白浅谈Ajax

• Ajax的全称是Asynchronous Javascript and XML,意思是异步JavaScript和XML
• Ajax是使用XMLHttpRequest对象与服务器端通信的脚本语言。
• 可以发送及接收各种格式的信息，包括JSON、XML、HTML和文本文件。
• Ajax可以无需刷新页面而与服务器端进行通信。
• 允许你根据用户事件来更新来更新部分页面内容。

1、Ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加了一个中间层（Ajax引擎），使用户操作与服务器响应式异步化。 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。把这些交给了Ajax引擎，用户操作起来也就更加流畅了。

2、Ajax的优点

• 页面无刷新，用户体验好
• 异步通信，更加快的响应能力
• 减少允余请求，减轻了服务器的负担
• 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序
• 界面与应用分离

3、Ajax应用场景

举个例子，用户在填写一个网上表单，当用户将所有的表单信息都填完之后，点击提交，然后有一个文本框提示所填文本格式不正确，然后页面表单里面的所有信息都要重新填。这时，用户是不是会有砸电脑的冲动。（哈哈哈。。。）但在Ajax出来之后，用户可以在不用刷新页面的情况下进行表单验证。提示表单所填格式的正确与否。这样是不是给用户带来很好的用户体验。

• 按需获取数据
• 数据验证
• 自动更新页面

4、Ajax的基本过程

Ajax的基本过程可以分为四步：
1、创建Ajax对象
2、连接服务器
3、发送请求
4、接收服务器的返回

function ajax(url,fnSucc,fnFaild){
//参数：1、连接服务器的地址；2、成功时函数；3、失败时函数
//1、创建Ajax对象
var oAjax;
if(window.XMLHttpRequest){
           oAjax = new XMLHttpRequest(); //ie6及以下不兼容
           }else{
           oAjax = new ActiveXObject("Microsoft.XMLHTTP");
           }

//2、连接服务器
oAjax.open('GET',url,true);

//3、发送请求
oAjax.send();

//4、接收服务器的返回
oAjax.onreadystatechange = function(){
   if(oAjax.readyState ==4 && oAjax.status ==200){  //完成  
                     alert('成功： '+oAjax.responseText);
                     fnSucc(oAjax.responseText);
   }else{
       alert('失败');
       if(fnFaild){
             fnFaild();
           }
       }
    }
}
}

1.新建一个XMLHttpRequest对象：

XMLHttpRequest是Ajax的核心，这一步是必不可少的。

var oAjax = new XMLHttpRequest();

2、Ajax兼容IE7以下

XMLHttpRequest对象是ie7才开始支持的。
如果要兼容ie5和ie6只需判断浏览器中是否存在XMLHttpRequest对象。

var oAjax;
if(window.XMLHttpRequest){
           oAjax = new XMLHttpRequest(); //ie6及以下不兼容
           }else{
           oAjax = new ActiveXObject("Microsoft.XMLHTTP");
           }

3、open方法表示初始化请求，此时并没有发送。

open方法的语法 ：open(method,url,async)

• method--请求方式，get或者post(默认为get)
• url--请求路径，文件在服务器上的位置
• async--true：异步请求。false--同步请求。（默认为true,异步）

4、定义数据返回后的回调函数，这时候通过监听onreadystatechange函数来判断情求的状态。

触发Ajax之后，XMLHttpRequest的状态会不断变化，这个值就存在readyState属性中。
readyState属性值：

0：请求未初始化，XMLHttpRequest对象创建完成，open还没有调用
1：服务器连接已建立，XMLHttpRequest对象初始化完成，send已经调用了
2：请求已发送，也就是接收到了头信息了
3：请求处理中，也就是接收到响应主体了
4：请求已完成，且响应已就绪，也就是响应完成了
数据解析完成之后会返回一个http状态码，通过XMLHttpRequest.status获得该值，判断是否为200，判断是否请求成功。

5、发送请求send()

• send()必须写在open()之后
• 使用get方式不填参数
• 使用post方式需要使用setRequestHeader()来添加http头，这个必须写在open()和send()之间。

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); 
xmlhttp.send();

xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("fname=Henry&lname=Ford");

ps:Ajax的跨域还没细看，先到这。