AJAX--XMLHttpRequest

时间 2019-11-17

标签 ajax xmlhttprequest 栏目 Ajax 繁體版

原文原文链接

1.AJAX Asynchronous JavaScript and XML

是一种在无需刷新页面的状况下，经过在后台与服务器进行数据交换javascript

更新部分网页内容的技术。html

2.工做原理

使用XMLHttpRequest对象发起请求java

建立XMLHttpRequest浏览器

全部现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。服务器

var request = new XMLHttpRequest();异步

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：async

var request = new ActiveXOject("Microsoft.XMLHTTP")函数

3.使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <script >
    window.onload= function(){
      var request;
        if(window.XMLHttpRequest){
           request = new XMLHttpRequest();
        }else{
           request = new ActiveXObject("Microsoft.XMLHttp");
        }
         request.onreadystatechange=function(){
   	        if(request.readyState == 4){
   	            if(request.status == 200){
   		          console.log(request.responseText)
   		        }
   	          }
        }
        request.open("GET","/test/test");
        request.send();
    }
      
  </script>
</head>
<body>
default默认
</body>
</html>

XMLHttpRequest 方法url

open(method,url,async) method :请求类型 "GET" "POST"spa

url：请求路径

async:是否异步 true(异步)或false(同步) 默认true

send(parameters) 将请求发送到服务器。parameters仅用于POST请求

POST 方法传送参数

setRequestHeader(name, value)

name参数是要设置的头部的名称。这个参数不该该包括空白、冒号或换行

value 参数是头部的值。这个参数不该该包括换行。

在调用了 open() 以后，但在调用 send() 以前。

4.响应

responseText 服务器响应的文本内容

responseXML 服务器响应的XML内容对应的DOM对象

5.状态

onreadystatechange 请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）

readyState 表示XMLHttpRequest对象的状态：

0：未初始化。对象已建立，未调用open；

1：open方法成功调用，但Sendf方法未调用；

2：send方法已经调用，还没有开始接受数据；

3：正在接受数据。Http响应头信息已经接受，但还没有接收完成；

4：完成，即响应数据接受完成。

Status 服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。