Ajax的创建方式

最新推荐文章于 2022-11-19 20:29:01 发布

weixin_33836874

最新推荐文章于 2022-11-19 20:29:01 发布

阅读量121

点赞数

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/u/3497902/blog/1931545

版权

2019独角兽企业重金招聘Python工程师标准>>>

使用XMLHttpRequest对象创建原生的Ajax请求。

现在的浏览器（IE7+，chrome，firefox等）均支持 XMLHttpRequest 对象，但对于早期的IE浏览器使用ActiveXObject对象。

创建方式

var xmlhttp;
if (window.XMLHttpRequest) //首先判断浏览器的类型
  {
  xmlhttp=new XMLHttpRequest(); //如果是支持XMLHttpRequest 
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //如果是早期的IE浏览器
  }

创建后XMLHttpRequest对象后，就可以与服务器进行数据的交换。

有两个方法：一个是open（），另一个是send（），分别用于打开连接，和发送数据。

open()方法接受三个参数，1、method，指定请求类型get或post。2、url，服务器的地址。3、async，指定是异步还是同步。

send()方法只接受一个参数，即url，请求的服务器路径。

    xml.open("POST","login.do",false);   
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xml.send(url);

返回结果

返回的结果的值均会封装到xml对象中，它有多个属性，在这里主要看两个属性readyState和status

HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

下表列出了状态、名称和含义：

Uninitialized

初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。

Open

open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。

Sent

Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。

Receiving

所有响应头部都已经接收到。响应体开始接收但未完成。

Loaded

HTTP 响应已经完全接收。

对于status属性，即为200则请求返回成功，所以代码如下：

if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }

这样，一个完整的原生的Ajax请求就完成了。

但实际上，由于JQuery的封装，我们已经很少这么做了，下面来看看使用JQuery是怎么进行ajax请求的。

Query实现 Ajax 的方法就简单很多了，已经封装好了一个 $.ajax函数，调用很方便。

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "login.do", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "cg","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})

当然，要使用JQuery的封装请求，需要有JQuery库的支持。

转载于:https://my.oschina.net/u/3497902/blog/1931545