ajax基础知识

一、全局刷新和局部刷新
说到ajax就必须先说到这两个概念
1、全局刷新 :
整个浏览器都被新的数据覆盖，在网络中传输大量数据，浏览器需 要重新加载和渲染页面。

2、局部刷新 ：
在浏览器内部发起请求，获取数据，改变页面中部分内容，其余都无需重新加载和渲染。

二、而ajax就是用来做局部刷新的
局部刷新使用的对象就是 异步对象（ XMLHttpRequest），此对象存在于浏览器内存中，使用JavaScript语法创建和使用 XMLHttpRequest对象

创建语法：var xmlHttp = new XMLHttpRequest();

ajax = Asynchronous JavaScript and XML (异步的 JavaScript 和 XML)

其中 Asynchronous : 异步 xml : 一种数据格式

ajax包含的技术主要有JavaScript、DOM、CSS、xml
JavaScript ： 负责创建异步对象，发送请求，更新页面的dom（Document Object Model）对象
xml：网络中数据传输的数据格式，现用json代替了

三、ajax使用XMLHttpRequest对象请求步骤

1）创建 异步对象 var xmlHttp = new XMLHttpRequest（）;

2）给异步对象绑定事件 onreadystatechange : 当异步对象发起请求，获取了数据都会触发这事件。 然后再此事件下指定一个函数（回调函数），在函数中处理状态的变化。
例：

 btn : onclick = fun1()
      function fun1(){
        alert("按钮单击");
     }

  

语法：
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange= function(){
   if(smlHttp.readyState==4&&xmlHttp.status==200){
           处理服务器返回数据
   var  data = xmlHttp.responseText;
 document.getElementById("name").value = data;  //将页面上标签id 为name的属性替换为data
      }
}

/******************************************************************************************/
/******************************************************************************************/

/******************************************************************************************/
/******************************************************************************************/

3）初始异步请求对象
异步的方法open()，
xmlHttp.open(请求方式 post || get ，请求地址，同步 || 异步 （默认是 true 异步）)
例如：
XMLHttp.open("get","loginServlet?name=admin&pwd=123",true)；
4）使用异步对象发送请求
xmlHttp.send();

获取服务器返回的数据，使用异步对象的属性 responsText
使用例子：xmlHttp.responseText

5）根据返回的不同的响应状态执行不同的条件分支

回调：当请求的状态变化时，异步对象会自动调用onreadystatechange事件对应的函数

四、在jQuery中AJAX的写法有3种，
$ajax，$post，$get这三种。其中$post和$get是简易写法，高层的实现，在调用他们的时候，会运行底层封装好的$ajax。
ajax写法

    $.ajax({
        url:"http://www.microsoft.com",    //请求的url地址
        dataType:"json",   //返回格式为json
        async:true,//请求是否异步，默认为异步，这也是ajax重要特性
        data:{"id":"value"},    //参数值
        type:"GET",   //请求方式
        beforeSend:function(data){
            //请求前的处理
        },
        success:function(req){
            //请求成功时处理
        },
        complete:function(data){
            //请求完成的处理
        },
        error:function(data){
            //请求出错处理
        }
    });

get请求**

     $.get("url",{id:1},function(data){
                        
      })

POST请求

     $.post("url",{id:1},function(data){
     
       })