XMLHttpRequest实现Ajax异步请求

时间 2019-11-13

标签 xmlhttprequest 实现 ajax 异步请求栏目 Ajax 繁體版

原文原文链接

1、XMLHttpRequest的方法

方法	描述
abort()	中止当前请求
getAllResponseHeaders()	把HTTP请求的全部响应首部做为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","url)	创建对服务器的调用。Method参数能够是GET、POST或PUT。URL参数能够是相对URL或绝对URL
send(content)	向服务器发送请求
setRequestHeader("header","value")	把指定首部设置为所提供的值。在设置任何首部以前必须先调用open()方法

2、XMLHttpRequest的属性

属性	描述
onreadystatechange	每一个状态改变都会触发这个事件处理器，一般会调用一个JavaScript函数
readyState	请求的状态，有5个可取值：0=未初始化、1=正在加载、2=已经加载、3=交互中、4=完成。
responseText	服务器的响应，表示为一个串
responseXML	服务器的响应，表示为XML。这个对象能够解析为DOM对象
status	服务器的HTTP状态码（200对应OK、404对应NOtFont等）
statusText	HTTP状态码的相应文本（OK或NotFount）

①、onreadystatechange

该事件处理函数由服务器触发，而不是用户
在Ajax执行过程当中，服务器会通知客户端当前的通讯状态。这依靠更新XMLHttpRequest对象的readyState 来实现。改变readyState属性是服务器对客户端链接操做的一种方式。每次readyState属性的改变都会触发onreadystatechange事件

②、send(data)

若选用的是GET请求，则不会发送任何数据，给send方法传递null便可

③、setRequestHeader(header,value)

若是用POST请求向服务器发送数据，须要将"Content-type"设置为“application/x-www-form-urlencoded”.它会告知服务器正在发送数据，而且数据已经符合URL编码了。
该方法必须在open()以后才能使用

④、responseText

XMLHttpRequest的responseText 属性包含了从服务器发送的数据。它是一个HTML，XM或普通文本，这取决于服务器发送的内容。
当readyState属性变为4时，responseText属性才可用，代表Ajax请求已经结束

Demo

检索helloAjax.txt文档中的内容

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
    window.onload=function(){
        //1.获取a节点，并为其添加onclick响应函数
        document.getElementsByTagName("a")[0].onclick=function(){
             //3.建立一个XMLHttpRequest对象
             var request=new XMLHttpRequest();
             //4.准备发送请求的数据：url
             var url=this.href +"?time="+new Date();
             var method="GET";
             //var method="POST"
             //5.调用xmlhttprequest对象的open方法
             request.open(method,url);
             //request.setRequestHeader("ContentType","application/x-www-form-urlencoded");
             //6.调用xmlhttprequest对象的send方法,get请求参数为null
             request.send(null);
             //request.send("name='aaa'");
             //7.为xmlhttprequest对象添加onreadystatechange响应函数
             request.onreadystatechange=function(){
                //8.决断响应是否完成：xmlhttprequest对象的readystate属性值为4
                 if(request.readyState==4){
                    //9.再决断响应是否可用：xmlhttprequest对象status属性值为200
                     if(request.status==200){
                        //10.打印响应结果：responseText
                        alert(request.responseText);
                     }
                 }
             }
             //取消a节点的默认行为
             return false;
        }
    }
    </script>
  </head>
  
  <body>
    <a href="helloAjax.txt">HelloAjax</a>
  </body>
</html>