JQuery的Ajax请求

1、Ajax简介

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

开发原因：

是为了改善传统web应用中    *请求-->等待-->响应  模式  的弊端    1、用户体验度    2、传统 ：服务器响应数据之前  ， 用户对页面不能进行其他操作，导致用户体验较差      ajax：服务器响应数据之前，用户对于页面还是可以操作的

原理：

1、在javascript中  使用  ajax技术  调用浏览器提供的XMLHttpRequest对象    进行请求访问2、向服务器发送的请求是  异步的     此时浏览器没有丢失任何数据     用户仍然可以对页面进行操作

Ajax编程

1、创建XMLHttpRequest 对象    *XMLHttpRequest对象   是      AJAX    的基础。    -->  使用Ajax  必须先得到XMLHttpRequest对象    *XMLHttpRequest xmlReq = new XMLHttpRequest();        （IE5 和 IE6 使用 ActiveXObject）        IE5&IE6 没有 XMLHttpRequest 对象        需要获取 ActiveXObject        （移动、联通、电信、广电  -->   OA 管理系统  全部必须  运行在(ie)  IE6 上）    *对于不同浏览器  获取的方式不一样（IE7 以下的版本）2、向服务器发送请求    *XMLHttpRequest对象         open(method    ,url     ,async);  -->  对请求进行设定（请求地址,请求方式,同异步）            post|get   请求地址 同步|异步            async:参见JAVA同步锁        send();  -->  发送    *get        open(method    ,url     ,async); //需要携带数据，在url后面拼接        send();//不能 传参    *post        open(method    ,url     ,async);        //如果有参数  需要设定 请求头的 contextType        setRequestHeader("Content-type","application/x-www-form-urlencoded");        send();//如果有参数，可以写在send（参数）  string类型的-->key=value&key1=value1……3、等待服务器响应，处理响应结果    onreadystatechange = 方法    循环调用方法    readyState  的状态码     判断什么时候执行        0: 请求未初始化(没有调用open())        1: 服务器连接已建立(有没有调用  send())            **过渡状态                2: 请求已接收                3: 请求处理中        4: 请求已完成，且响应已就绪             ** responseText  默认值是一个空字符串                  当请求状态没有变成4时  即便浏览器已经拿到了数据                  也不会 将拿到的值  赋值给responseText，                  当请求状态变为4时,才会去赋值    status  的页面状态码   判断响应是不是正常，常见的状态码有：200,404,500,403,201

2、JQuery Ajax请求的几种常用方法

（1）$.getJSON(url,data,callback); // 是以 HTTP get 方式提交请求

url:        ajax请求地址data:       ajax请求时需要携带的参数callback:   ajax请求完成时调用函数(function)getJSON 接收的是服务返回的字符串,将返回的字符串，按照JSON格式字符串进行转换成JSON对象。function(data){           // data 表示的时  请求后  服务器返回的JSON对象}

（2）$.post(url,data,callback,type) 是以 HTTP post 方式提交请求

 url:       ajax请求地址 data:      ajax请求时需要携带的参数 callback:  ajax请求完成时调用函数 function(data){       // data 表示的时  请求后  服务器返回数据 } type:指定返回数据的类型 方法本身根据type指定的类型进行预处理 被返回的数据的类型 (html,xml,json,jasonp,script,text) 如果不指定默认是响应头中Content-Type 指定的类型 根据返回的字符串格式进行自动转换   

（3）、$.get(url,data,callback,type)是以 HTTP get 方式提交请求

url:        ajax请求地址data:       ajax请求时需要携带的参数callback:   ajax请求完成时调用函数function(data){       // data 表示的时  请求后  服务器返回数据}type:       指定返回数据的类型方法本身根据 type 指定的类型  进行预处理被返回的数据的类型 (html,xml,json,jasonp,script,text)如果不指定默认是响应头中Content-Type 指定的类型根据返回的字符串格式进行自动转换

（4）、$(selector).load(url,data,callback)

把远程数据加载到被选的元素中，正常的ajax请求发送，服务器正常响应，load获取到数据，将数据直接写入到 调用 load方法的 元素中

url:        ajax请求地址data:       ajax请求时需要携带的参数callback:   ajax请求完成时调用函数function(data){       // data 表示的时  请求后  服务器返回数据}

（5）、$.ajax(options) jquery的普通AJAX方法

options -->   json格式的字符串     (用户自定义)key:value,key:value   async           同异步   true|falsedata            请求需要传递的参数   JSON格式字符串|StringdataType        请求服务器，服务器返回的数据类型   text|json|xml|html|script|jsonperror           请求错误时执行的方法    function(){}success         请求成功后执行的方法    function(){}type            请求类型   get|post|put|delete url             请求地址