234 lines
7.3 KiB
Markdown
234 lines
7.3 KiB
Markdown
---
|
||
title: 一文搞懂AJAX技术
|
||
date: 2020-12-12 13:58:17
|
||
tags:
|
||
- JavaWeb
|
||
- JQuery
|
||
- AJAX
|
||
categories:
|
||
- JavaWeb
|
||
---
|
||
|
||
## AJAX简介
|
||
|
||
AJAX（Asynchronous JavaScript and XML）即异步的 JavaScript 和 XML。AJAX 是与服务器交换数据，在不重新加载整个页面的情况下更新部分网页的技术。
|
||
|
||
<!--more-->
|
||
|
||
ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成：
|
||
|
||
> 1. 使用CSS和XHTML来表示。
|
||
>
|
||
> 2. 使用DOM模型来交互和动态显示。
|
||
> 3. 使用XMLHttpRequest来和服务器进行异步通信。
|
||
> 4. 使用javascript来绑定和调用。
|
||
|
||
**AJAX 的核心是 XMLHttpRequest 对象。**
|
||
|
||
> 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。
|
||
>
|
||
> IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象
|
||
|
||
**AJAX属于前端技术，通过JS代码来编写。**
|
||
|
||
## AJAX工作原理
|
||
|
||
Ajax的工作原理相当于在用户和服务器之间加了一个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像一些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
|
||
|
||
|
||
|
||
浏览器的普通交互方式
|
||
|
||
|
||
|
||
浏览器的AJAX交互方式
|
||
|
||
|
||
|
||
有了AJAX层，用户页面可以不必等待服务器返回响应才可以进行下一个请求，而是以异步的方式，不同的AJAX请求互相不需要等待，极大的提高了效率。
|
||
|
||
## XMLHttpRequest对象常用属性和方法
|
||
|
||
### 属性
|
||
|
||
**onreadystatechange 属性**
|
||
|
||
onreadystatechange 属性存有处理服务器响应的函数。 下面的代码定义一个空的函数，可同时对
|
||
onreadystatechange 属性进行设置：
|
||
|
||
```javascript
|
||
xmlHttp.onreadystatechange = function() {
|
||
//code
|
||
}
|
||
```
|
||
|
||
**readyState属性**
|
||
|
||
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
|
||
readyState 属性可能的值：
|
||
|
||
|
||
|
||
向上面的 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成(意味着可获得数据)：
|
||
|
||
```javascript
|
||
xmlHttp.onreadystatechange = function() {
|
||
if (xmlHttp.readyState == 4) {
|
||
//从服务器的response获得数据
|
||
}
|
||
}
|
||
```
|
||
|
||
**responseText 属性**
|
||
|
||
可以通过 responseText 属性来取回由服务器返回的数据。 在下面的代码中，将时间文本框的值设置为等于responseText：
|
||
|
||
```javascript
|
||
xmlHttp.onreadystatechange = function() {
|
||
if (xmlHttp.readyState == 4) {
|
||
document.myForm.time.value = xmlHttp.responseText;
|
||
}
|
||
}
|
||
```
|
||
|
||
其它属性如下：
|
||
|
||
|
||
|
||
### 方法
|
||
|
||
**open() 方法**
|
||
|
||
open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定是否对请求进行异步地处理。
|
||
|
||
```javascript
|
||
xmlHttp.open("GET","test.jsp?key=xxx&key=xxx",true);
|
||
```
|
||
|
||
**send() 方法**
|
||
|
||
send() 方法将请求送往服务器。
|
||
|
||
```javascript
|
||
xmlHttp.send(null);
|
||
```
|
||
|
||
> open和send方法中参数的使用
|
||
>
|
||
> [https://blog.csdn.net/weixin_40292626/article/details/78708160](https://blog.csdn.net/weixin_40292626/article/details/78708160)
|
||
|
||
其他方法如下：
|
||
|
||
|
||
|
||
## AJAX实现方法
|
||
|
||
### 原生JS方法
|
||
|
||
实现AJAX的步骤如下：
|
||
|
||
1. 创建XMLHttpRequest对象。
|
||
2. 设置请求方式。
|
||
3. 调用回调函数。
|
||
4. 发送请求。
|
||
|
||
**1. 创建XMLHttpRequest对象**
|
||
|
||
一般我们手写AJAX的时候，首先要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。JS代码如下：
|
||
|
||
```javascript
|
||
//第一步：创建XMLHttpRequest对象
|
||
var xmlHttp;
|
||
if (window.XMLHttpRequest) {
|
||
//非IE
|
||
xmlHttp = new XMLHttpRequest();
|
||
} else if (window.ActiveXObject) {
|
||
//IE
|
||
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
|
||
}
|
||
```
|
||
|
||
**2. 设置请求方式**
|
||
|
||
```javascript
|
||
//第二步：设置和服务器端交互的相应参数，向路径http://localhost:8080/JsLearning3/getAjax准备发送数据
|
||
var url = "http://localhost:8080/JsLearning3/getAjax";
|
||
xmlHttp.open("POST", url, true);
|
||
```
|
||
|
||
**3. 调用回调函数**
|
||
|
||
```javascript
|
||
//第三步：回调函数
|
||
xmlHttp.onreadystatechange = function() {
|
||
if (xmlHttp.readyState == 4) {
|
||
if (xmlHttp.status == 200) {
|
||
var obj = document.getElementById(id);
|
||
obj.innerHTML = xmlHttp.responseText;
|
||
} else {
|
||
alert("AJAX服务器返回错误！");
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
> `xmlHttp.status == 200`：200指服务器状态码：代表正确。
|
||
>
|
||
> 更多状态码可以看我前面讲JSP的那篇文章：
|
||
>
|
||
> [https://blog.csdn.net/qq_40932102/article/details/110235296](https://blog.csdn.net/qq_40932102/article/details/110235296)
|
||
|
||
**4. 发送请求**
|
||
|
||
```javascript
|
||
//第四步：设置发送请求的内容和发送报送。然后发送请求
|
||
var uname= document.getElementsByName("userName")[0].value;
|
||
var upass= document.getElementsByName("userPass")[0].value ;
|
||
// 增加time随机参数，防止读取缓存
|
||
var params = "userName=" + uname+ "&userPass=" +upass+ "&time=" + Math.random();
|
||
// 向请求添加HTTP头，POST如果有数据一定要加
|
||
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
|
||
xmlHttp.send(params);
|
||
```
|
||
|
||
如果需要像 HTML 表单那样 POST 数据，要使用 setRequestHeader() 来添加HTTP头避免乱码。然后在 send() 方法中传入希望发送的数据。
|
||
|
||
### JQuery实现Ajax
|
||
|
||
使用原生js的方式实现ajax，步骤繁琐，方法、属性、常用值较多不好记忆。
|
||
|
||
使用JQuery实现Ajax只需要调用JQuery封装好的ajax()方法即可，它可以通过发送 HTTP请求加载远程数据，是 jQuery 最底层的 Ajax 实现，具有较高灵活性。语法如下：
|
||
|
||
```javascript
|
||
$.ajax({
|
||
url:请求地址
|
||
type:"get | post | put | delete " 默认是get,
|
||
data:请求参数 {"id":"123","pwd":"123456"},
|
||
dataType:请求数据类型"html | text | json | xml | script | jsonp ",
|
||
success:function(data,dataTextStatus,jqxhr){ },//请求成功时
|
||
error:function(jqxhr,textStatus,error)//请求失败时
|
||
})
|
||
```
|
||
|
||
JQuery中也有简单的get()和post()方法可以使用
|
||
|
||
```javascript
|
||
$.get(url,data,function(result) { //通过远程 HTTP GET 请求载入信息。
|
||
//将服务器返回的数据显示到页面的代码
|
||
});
|
||
|
||
$.post(url,data,function(result) { //通过远程 HTTP POST 请求载入信息。
|
||
//将服务器返回的数据显示到页面的代码
|
||
});
|
||
//url:请求的路径
|
||
//data:发送的数据
|
||
//result：自动接收从servlet打印流打印的字符串，默认是String，不能接收JSON格式
|
||
```
|
||
|
||
**返回的数据都被封装到了result变量里，get/post()中返回时text类型，ajax()中可以指定返回的数据类型**
|
||
|
||
根据传回的数据格式选择不同的方法，如果是简单的字符串，建议使用get/post()，如果传回的是复杂数据，**以JSON格式传回，只能使用ajax（）**
|
||
|
||
|
||
|