Ajax请求

jQuery发送Ajax请求

<p style='color:red'>hello world!</p>
<button id='btn'>改变文字内容</button>

$(function(){

var $btn=$('#btn');
  var $content=$('#text');
  $btn.click(function(){

$.ajax({

    url:'content.text',

    type:'get',

    async:true,

    timeout:2000,

    dataType:'text',

beforeSend:function(xhr){

      console.log(xhr);

      console.log('before send')

    },

success:function(data,textStatus,jqXHR){

       console.log(data);

       console.log(textStatus);

       console.log(jqXHR);

    }，

error:function(xhr,textStatus){

      console.log('error');

      console.log(xhr);

      console.log(textStatus);

    }，

complete:function(){

      console.log('end');

    }

js发送Ajax请求

1.创建请求对象

  var xhr=new XMLHttpRequest;
  （new ActiveXObject('Microsoft.XMLHTTP')【IE5、6】）

2.设置请求方式

  xhr.open('get','URL地址',true);

3.发送请求

  xhr.send();

4.监听请求

  xhr.onreadystatechange=function(){

    if(xhr.readystate===4){

     if(xhr.status>=200 && xhr.status<300 || xhr.status==304){

      5.处理返回数据

      xhr.responseText;

      }

    }

  }

<b>xhr.readystate-->Ajax状态码：代表当前Ajax处理进度</b>

 <b>0：</b>unset    当前请求还没有发送

 <b>1：</b>opend    URL地址已经打开(发送前的参数配置已完成)

 <b>2：</b>Headers_Received   响应头信息已经接收，已经调用send

 <b>3：</b>loading   主要返回的内容正在服务器端进行准备处理

 <b>4：</b>done    响应主体的内容已经成功返回到客户端

<b>xhr.status-->HTTP网络状态码：描述了服务器响应内容的状态</b>
 200：代表相应主体的内容已经成功返回了

 301：永久重定向/永久转移

 302：临时重定向/临时转换

 304：本次获取的内容是获取缓存中的数据(本地缓存)

 400：参数出现错误

 401：无限制访问

 404：客户端访问的地址不存在

 500：位置的服务器错误

 503：服务器超负荷