Ajax基础知识

Posted 2020-09-27 web_study

Ajax名称

Asynchronous javascript And XML 翻译为： 异步JS数据交互模块；

作用

实现前后端或跨页面间的异步数据通信；

同源策略限制

Ajax默认只能在同一个网站中使用，不能跨域， 最好在网站环境（服务器环境）下测试。

Ajax核心对象属性方法（重点）

XMLHttpRequest 是Ajax的核心对象，是浏览器内建的对象，特点如下：

 

1）在不重新加载页面的情况下更新网页

2）在页面已加载后从服务器请求数据

3）在页面已加载后从服务器接收数据

4）在后台向服务器发送数据

 

所有现代的浏览器都支持 XMLHttpRequest 对象。

 XMLHttpRequest 拥有5个属性：

1）readyState

2）status

3）responseText

4）responseXML

5）statusText

1个事件：

 

onreadystatechange  

7个方法：

1）open(method, url [, async = true [, username = null [, password = null]]]) 

2）send(body)

3）setRequestHeader(name, value)（注：请求头，post请求下必须使用，get请求不需要）

4）abort()

5）getAllResponseHeaders()

6）getResponseHeader()

7）setRequestHeader()

2种请求方式：

GET/POST

语法格式：

 

 1 //最简单的get请求
 2 
 3 var xhr = new XMLHttpRequest(); //0
 4 xhr.onreadystatechange = stateFn; //3,4
 5 xhr.open("get", "a.txt");  //1
 6  xhr.send(null);       //2         
 7 
 8  function stateFn() {
 9      if(xhr.readyState == 4&&xhr.status == 200) {
10          h1.innerhtml = xhr.responseText;
11      }
12  }

 

语法解释：

 

1）open()方法，初始化 HTTP 请求参数，并不发送请求。
语法格式：xhr.open(method, url [, async = true [, username = null [, password = null]]]) 
功能：
=> method 参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。
=> url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
=> async 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。
代码示例：xhr.open("get","xmlhttprequest.php",false);

2）send()方法，发送open()准备好的请求
语法格式：xhr.send([data = null])  
 功能：设置请求主体，如果请求方法为GET或HEAD主体只能是空的NULL,其他值没有意义。
 代码示例：xhr.send(null);

3）GET请求方式
GET请求是Ajax应用中最常见请求类型，通过向服务器端发送查询，并接收服务器端处理后的数据。
 查询字符串一般直接添加到请求的地址末尾，这个添加的请求字符如果是非字母和数字一般都需要经过编码处理才行。
 这个编码一般由函数 encodeURIComponent()方法完成。