ajax

使用ajax其实就是运用XMLHttpRequest与Web服务器端进行数据的异步交换

一般来说,浏览器都支持xhr对象,单IE5,IE6不支持,所以创建对象时如下:

var request;

if(window.XMLHttpRequest)

{

  request=new XMLHttpRequest();

}

else

{

  request=new ActiveXObject("Miscrosoft.XMLHttp");

}

此处介绍下Http请求中的状态码:

1XX:信息类,表示Web浏览器请求进一步处理中

2XX:表示成功,如200

3XX:表示重定向,请求不成功,用户需要采取进一步动作

4XX:客户端错误,输入信息有误,如404 not found

5XX:服务器错误,无法完成客户请求,如500

XMLHttpRequest发送请求:

open(method,url,async)第三个参数表示是异步还是同步,默认是true,method有两种,get和post,get是安全的一种方式,因为用get一般是获取信息,被称为所谓的幂等,即get1000次和get1次效果是一样的,不会产生任何质的改变,post方法一般用户增删改查。所以send方法一般会带上参数

send(string)

//

request.open("get","get.php",true)

request.send();

//

request.open("post","news.php",true);

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置头部信息,告诉Web服务器,这是一个post请求

request.send(“name='王伟'&& age=12”);

下面XMLHttpRequest获得响应:

responseText 获取字符串信息

responseXML 获取XML格式信息

status或statusText,以数字、字符串形式获取状态码

getAllResponseHeader() 获取所有响应报头

getResponseHeader(传入参数)查询响应中某个字段的 值

有一个属性readyState非常重要,当=0:请求未初始化,open还没有调用

1:服务器成功连接,调用open

2:接收了头信息

3:接收了响应主体

4:请求完成

那么如何监听这个属性呢:

request.onreadystatechange=function(){

  if(request.readtState===4 && request.status===200){

    .....request.responseText

  }

}

那么其实我们平常项目中写ajax时,并不会每次都写如此麻烦的代码,因为有一些js分装了ajax,实现简单运用ajax,这里介绍jQuery的ajax:

$.ajax([seeting]);

type:GET或POST ,默认get

url:服务器端请求地址

data:连同请求发送给服务器的数据

dataType:预期服务器返回的数据类型,可以不指定,默认json格式

success,是个函数,请求成功后调用此方法,参数是一些返回数据,参数等

error,函数,请求失败时调用此方法,传入参数是一个XHR对象

还有很多其他参数值

下面以post为例,这里ajax采用json格式,即在服务器端,返回的数据是以json的格式,以PHP为例,echo“{“success”:true,"msg":"查找成功!"}”

$.ajax({

  type:"POST",

  url:"service,php",

  data:{name:$("#username").val(),age:$("#age").val()

  },

  dataType:"json",

  success:function(data)
  {

  if(data.succcess)

  {$("#rersult").html(data.msg);

  }

  else{$("#rersult").html("出现错误"+data.msg);}

    

  },error:function(XHRobj)

  {

    alert(XHRobj.status);

  }

});

原文地址:https://www.cnblogs.com/openflyme/p/4752767.html