Ajax学习笔记

最新推荐文章于 2022-05-20 14:49:56 发布

LeeSayhi

最新推荐文章于 2022-05-20 14:49:56 发布

阅读量307

点赞数

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/LeeSayhi/article/details/54178228

版权

Ajax 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

关于Ajax：

更新网页而不重新加载网页
在页面加载后从服务器请求数据
在加载页面后从服务器接收数据
将数据发送到服务器 - 在后台

Ajax如何工作：

网页中发生事件（页面加载，点击按钮）
XMLHttpRequest对象由JavaScript创建
XMLHttpRequest对象向Web服务器发送请求
服务器处理请求
服务器将响应发送回网页
响应由JavaScript读取
正确的操作（如页面更新）由JavaScript操作

Ajax示例：

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp;
  //检查浏览器是否支持XMLHttpRequest对象
  if (window.XMLHttpRequest) {
    //如果是，创建一个XMLHttpRequest对象
    xhttp = new XMLHttpRequest();
    } else {
    //如果没有（IE5，IE6），创建ActiveXobject对象
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>

</body>
</html>

XMLHttpRequest对象属性:

readyState属性：标识XMLHttpRequest对象的状态，有五种值：
0 ： 未初始化状态（对象创建，但未初始化）
1 ： 准备发送状态（此时，已经调用了XMLHttpRequest对象的open()方法，并且该对象已经准备好将一个请求发送到服务器）
2 ： 已发送状态（此时，已通过调用send()方法把一个请求发送到服务器，但还没有收到一个响应）
3 ：正在接收状态（此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到）
４：完成响应接收（此时，已完成了HttpResponse响应的接收）
responseText属性：
该属性包含客户端接收到的HTTP响应的文本内容。当readyState属性为0、1、2时，该属性包含空字符串；当readyState值为3时，响应中包含客户端还未完成的响应信息；当readyState值为4时，该属性才包含完整的响应信息。
responseXML属性：
只有当readyState属性值为4，并且响应头部的Content-Type的MIME类型被指定为XML （text/xml或者application/xml）时，该属性才有值并且被解析为一个XML文档，否则该属性值为null。如果回传的XML文档结构不良或者未完成响应回传，该属性也为空。
status属性：
描述HTTP状态码。注意，仅当readyState值为3（正在接收）或4（已加载）时，才能访问此属性。否则，试图读取时，将引发异常。
statusText属性：
描述HTTP状态码文本。跟status的注意事项一样，必须readyState为3或4。

XMLHttpRequest对象的方法：

onreadystatechange 事件：
当readyState属性值发生改变，就会触发此事件。一般都通过此事件来触发回传处理函数。
open() 方法：
XMLHttpRequest对象是通过调用open(method, url, async, username, password)方法来进行初始化的。调用该方法会得到一个可以用来进行发送（send()方法）的对象。此时，readyState状态会被设为1（准备发送状态）。方法参数解释如下：
① method参数是必须提供的，用于指定用来发送请求的HTTP方法（GET, POST, PUT, DELETE或HEAD）。按照HTTP规范，该参数要大写。
②url用来指定请求的URL，该地址会被自动解析为绝对地址。
③async参数用来指定请求是否是异步的，默认值为true。发同步请求，设为false
④如果需要服务器验证访问用户的情况，可以设置username和password
send() 方法：
必须在调用了open方法，即readyState的值为1，对象处理可发送状态时，才可以调用send()方法，将请求发送出去。
当open()方法的参数async为true时，send()方法调用后立即返回，否则将等待请求返回。
调用了send()方法到接收到响应之前，readyState的值将被设为2；一旦接收到响应，被设为3；直到响应接收完成，readyState的值才会被设为4。
send()可使用一个可选参数，用于传递POST数据到服务器。参数可以不传或直接用null。
一般情况下，在调用send()方法之前，应该设置Content-Type头部信息。如果send(data)方法中的data参数的类型为DOMString，那么数据将被编码为UTF-8。如果数据是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。
abort() 方法：
该方法可以暂停一个HttpRequest的请求发送或者HttpResponse的接收，并将XMLHttpRequest对象设置为初始化状态。
setRequestHeader() 方法：
用来设置请求的头部信息。需要在调用了open()方法之后调用此方法，否则会报异常。setRequestHeader(header, value)包含两个参数：前一个是键名称，后面是键值。
getResponseHeader() 方法：
用于检索响应的头部值，仅当readyState属性值是3或4时，才可以调用此方法；否则，返回一个空字符串。
此外，还可以通过getAllResponseHeaders()方法获取所有的HttpResponse的头部信息。