Ajax_02之XH路虎极光发起异步乞求,javascript学习笔

2019-09-08 05:32 来源:未知

Ajax及其工作原理

1、Ajax:
 AJAX:Asynchronous Javascript And Xml,异步的JS和XML;
 同步请求:地址栏输入URL、链接跳转、表单提交……
 异步请求:使用Ajax发起,底层使用XMLHttpRequest对象;
2、XHR的创建:
 var xhr=null;
 if(window.XMLHttpRequest){xhr=new XMLHttpRequest();//新IE及其它}
 else{xhr=new ActiveXObject('Microsoft.XMLHTTP');//老IE}
3、XMLHttpRequest对象的常用成员:
 ①成员属性:
  readyState:int,初始值0;
   0——UNSEND——请求消息未发送;1——OPENED——XHR已打开到服务器的链接;2——HEADERS_RECEIVED——XHR已经接收到响应消息起始行和头部;3——LOADING——XHR正在加载响应消息主体;4——DONE——XHR已经完成响应消息;
  responseText:初始值"",readyState值为3时开始有响应消息主体文本;
  responseXML:初始值null,readyState值为3时有响应消息主题内容——XML DOM树对象;
  status:初始值0,保存响应状态码,readyState值为2时开始有值;
  statusText:初始值"",保存响应消息原因短句,readyState值为2开始有值;
 ②成员事件:
  onreadystatechange:每次readyState值发生改变就触发;
 ③成员方法:
  open(method,url):打开到服务器的连接;
  send():发送请求消息;
  setRequestHeader(name,value):设置请求消息头部;
  getAllResponseHeaders():获取所有的响应消息头部;
  getResponseHeader(name):获取某个响应消息头部;
4、XHR对象发起异步请求步骤:
 ①创建XHR对象:
  var xhr=new XMLHttpReponse();
 ②监听XHR就绪状态改变事件:
  xhr.onreadystatechange=function(){}
 ③连接到服务器:
  xhr.open(method,url,isAsync);
 ④发起请求消息:
  xhr.send(data);
5、XHR发起异步的HTTP GET请求:
 ①创建XHR对象:
  var xhr=new XMLHttpResponse();
 ②监听XHR就绪状态改变事件
  xhr.onreadystatechange=function(){
   if(xhr.readystate===4){
    if(xhr.status===200){doResponse(xhr);}
    else{alert("响应完成,但有问题");}
   }
  }
 ③连接到服务器
  xhr.open('GET','x.php?k=v&k=v',true);
 ④发起请求消息
  xhr.send(null);
6、XHR发起异步HTTP POST请求:
 ①创建XHR对象:
  var xhr=new XMLHttpResponse();
 ②监听XHR就绪状态改变事件
  xhr.onreadystatechange=function(){
   if(xhr.readyState===4){
    if(xhr.status===200){doResponse(xhr);}
    else{alert("响应完成,但有问题");}
   }
  }
 ③连接到服务器
  xhr.open('POST','x.php',true);
 ④修改请求消息头部
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 ⑤发起请求消息
  xhr.send('k=v&k=v');

AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡。

AJAX是不能跨域的,如需跨域,可以使用document.domain='a.com';或者使用服务器代理,代理XMLHttpRequest文件

AJAX是基于现有的Internet标准,并且联合使用它们:

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

图片 1

创建 XMLHttpRequest 对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建Ajax对象:

//IE6以上
var oAjax = new XMLHttpRequest();

//IE6
var oAjax =new ActiveXObject("Microsoft.XMLHTTP")
连接服务器

oAjax.open(方法,url,是否异步)
我们都知道,Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。所以,Ajax天生就是工作在异步模式的(异步为true,同步false)

同步和异步

同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。
(简单点说:同步就是只能一件一件事的来做,而异步就是可以多件事同时进行)

发送请求send()

复制代码 代码如下:

<script type="text/javascript">
function getDoc(){
    var xmlhttp;
    if(window.xmlhttpRequest){
        xmlhttp=new XMLHttpRequest();
    }
    else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//for IE6
    }
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
            document.getElementById("myId").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", index.php,true);
    xmlhttp.send();
}
</script>
</head>
<body>
    <button type="button" onclick="getDoc()">请求数据</button>
</body>

GET 还是 POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
接收返回信息

oAjax.onreadystatechange = function(){   //当请求状态改变时要调用的事件处理器

    alert(oAjax.readystate);          

}
只要readyState属性的值发生变化时,便会触发一次readyStatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常,我们只对readyState值为4的阶段感兴趣,因为这时所有数据都已经就绪,不过,必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。下面来看一个例子:

复制代码 代码如下:

var xhr = createXHR();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.statusText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

XHR对象

当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态,直到请求被处理,然后才接收一个回应。readyState就是XHR请求的状态属性,它本身有5个属性值:

0(未初始化)还没有调用open()方法
1(载入)已调用send()方法,正在发送请求
2(载入完成)send()方法完成,已收到全部响应内容
3(解析)正在解析响应内容
4(完成)响应内容解析完成,可以再客户端使用了
status

   status属性表示从服务器返回的响应状态码。例如:200表示成功,404表示未找到。

1字头:消息。这一类型的状态码,代表请求已被接受,需要继续处理。
2字头:成功。这一类型的状态码,代表请求已成功被服务器接收、理解、并接受。
3字头:重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。
4字头:客户端错误。这类状态码代表了客户端看起来可能发生错误,妨碍了服务器的处理。
5字头:服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生

另附:http状态码详解

statusText

  statusText是响应返回的文本信息,仅当readyState值为3或4的时候才能使用。当readyState为其它值时视图存取statusText属性将引发异常。

XHR的方法

方法 描述
abort() 导致当前正在执行的请求被取消
getAllResponseHeaders() 返回包含所有响应头的名称和值的单个字符|串
getResponseHeader(name) 返回响应头中指定的名称和值
open(method,url,async,username,pwd) 设置HTTP方法(get或post)等
send(content) 发出带有指定主体内容的请求
setRequestHeader(name,value) 使用指定的名称和值设置请求头

复制代码 代码如下:

<script type="text/javascript">
        var oAjax =oAjax();
        alert(oAjax.readyState);//弹出"0"
        oAjax.open("get","index.html",true);
        alert(oAjax.readyState);//弹出"1"
        oAjax.send(null);
        alert(oAjax.readyState);//IE下弹出4,而firefox是2
        //可以通过readystatechange事件监听
        oAjax = XHR();
        oAjax.onreadystatechange = function () {
            alert(oAjax.readyState);//Firefox下依次是1,2,3,4但最后还会再来个1
            //IE下则是1,1,3,4
        };
        oAjax.open("get","index.txt",true);
        oAjax.send(null);
</script>

您可能感兴趣的文章:

  • 如何解决Ajax访问不断变化的session的值不一致以及HTTP协议中的GET、POST的区别
  • 通过XMLHttpRequest和jQuery实现ajax的几种方式
  • node.js+Ajax实现获取HTTP服务器返回数据
  • Ajax 给 XMLHttpReq.onreadystatechange传递参数
  • 解析ajax核心XMLHTTPRequest对象的创建与浏览器的兼容问题
  • AJAX(XMLHttpRequest.status)状态码
  • 动态表单验证的操作方法和TP框架里面的ajax表单验证
TAG标签:
版权声明:本文由990888藏宝阁发布于网络应用,转载请注明出处:Ajax_02之XH路虎极光发起异步乞求,javascript学习笔