JavaScript之原生ajax && jQuery之ajax

    ajax提供了异步访问服务器的方法，使页面无须刷新就可以更改页面内容，在实际情况中使用原生的情况较少但是原理需要掌握，一般都是使用jquey更轻量级的实现ajax但是原理是共同的。

    原生ajax使用过程：

1.创建ajax核心对象

IE浏览器核心对象为XMLHTTP，其他浏览器核心对象为XMLHTTPRequest，因此为了解决不同浏览器的兼容问题需要对浏览器核心对象进行判断

var xmlhttp;

if(window.XMLHTTP){

xmlhttp=new XMLHTTPRequest();

}else{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//ie6以下版本

}

2.创建请求

        open()中有三个参数，第一个参数是请求方式，有两种get和post,两者区别在于get更快更便捷，在以下几种情况必须用post方式

（1）向服务器发送大量数据的时候；

（2）发送包含未知字符输入的时候，比如表单中的提交信息是由用户所撰写的

（3）无法使用缓存文件的时候

第二个参数是后端文件的地址，第三个参数是否异步，只有为true时才可异步，开启信息传送

         xmlhttp.open("get","example.php",true);

3.发送请求参数

不同的页面需求不同，需要获取不同的数据需要依靠请求参数实现，多个请求参数之间以&连接

xmlhttp.send("user="+user&"password="+password);

只有post请求的参数才能够放在send中，如果是get请求的方式，参数不允许放在send()中，而是要放在后端数据文件地址后面以?连接,并且还要在中间加上请求头

xmlhttp.open("get","example.php?user="+user+"&password="+password",true);

xmlhttp.setRequestHeader("content-Type","application/x-www-form-urlencoded");

xmlhttp.send(null);

4.接受响应

       

页面有五种请求状态readyState,0:尚未初始化  1:正在发送请求  2:请求完成  3:接受响应  4:响应完毕

服务器返回状态status  404:找不到页面  200:响应成功  500:内部服务器错误

xmlhttp.onreadystatechange=functino(){

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

var date = xmlhttp.responseText   //使用文本格式拿数据，也有其他方式获取数据请自便

}

}

jquery ajax使用过程：

1.post请求方式

$.ajax({

type:'POST',            //请求方式
           url:'example.php',        //发送请求的地址
           dataType:'json',         //服务器返回的数据类型
           data:{name:xxx,age:xxx},    //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
           success:function(data){
                                  //请求成功，返回内容
           },
           error:function(jqXHR){
             //请求失败，返回内容
          }
        });

            2.get请求方式      

$.ajax({
            type:'GET',           
            url:'example.php?name'+=xxx,  //发送请求的地址以及传输的数据
            dataType:'json',         //服务器返回的数据类型
            success:function(data){
             //请求成功，返回内容
            },
            error:function(jqXHR){
             //请求失败，返回内容
            }
          });