AJAX技术基础知识

最新推荐文章于 2022-08-19 19:18:03 发布

Ying_ya

最新推荐文章于 2022-08-19 19:18:03 发布

阅读量406

点赞数

分类专栏： AJAX 文章标签： AJAX技术原生AJAX

本文链接：https://blog.csdn.net/Ying_ya/article/details/99292048

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AJAX实现网页局部更新

最近在学AJAx，简单整理了一下在百度、知乎和《Web应用开发》上关于AJAX的一些基本知识，方便以后随时查阅。

AJAX简介

Ajax = Asynchronous JavaScript and XML，异步的JavaScript和XML
Ajax是一种利用JavaScript向服务器发送器请求，并获得服务端响应的技术。
AJAX是一套综合了多项技术的浏览器端网页开发技术：

①XHTML和CSS的基于标准的表示技术
②DOM动态显示和交互
③XML和XSLT进行数据交换和处理
④XMLHttpRequest进行异步数据检索
⑤JavaScript将以上技术融合在一起
Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAx特点

异步请求，局部刷新。

Ajax作用

Ajax使得“不刷新页面向服务器发送请求”成为可能，即在不重新加载整个页面的情况下可以与服务器交换数据并更新部分网页内容。

Ajax工作模式
2. Ajax应用通过在客户端和浏览器之间引入一个媒介“AJAX Engine”来发送异步请求。AJAX Engine通过XMLHttpRequest对象向服务器发送HTTP请求，服务器处理完后返回响应结果（可能是各种类型的数据，如字符串、XML和JSON等），AJAX Engine根据响应文档类型对数据进行解析后再配合HTML和CSS渲染，将结果显示到客户端页面。
传统模式与Ajax模式对比
AJAX的使用
XMLHttpRequest是AJAX的核心，是AJAX技术得以实现的一个重要的JavaScript对象。
使用AJAX发起一个请求只需4步：

1.创建XMLHttpRequest对象

var xhr;
if (window.XMLHttpRequest) {
//  IE7+, Firefox, Chrome, Opera, Safari 浏览器均内建了XMLHttpRequest对象
	xhr = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器则使用ActiveX对象
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2.监听请求成功后的状态变化

xhr.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
			console.log（xhrhttp.responseText;）
	}
}

XMLHttpRequest对象的常用属性和事件

readyState：表示异步请求过程中的各种状态。
=0：未初始化状态，已创建XMLHttpRequest对象但未初始化。
=1：准备发送状态，已调用open()方法，并且准备好将一个请求发送到服务器。
=2：已发送状态，已经调用send()方法发送请求到服务器，等待响应。
=3：正在接收状态，AJAX Engine已经接收到HTTP响应头部信息和一部分消息体。
=4：完成响应状态，HTTP响应已经完全接收。
responseText：包含客户端接收到的HTTP响应的文本内容。
responseXML：从服务器进程返回的XML文档数据对象。
status：从服务器端返回的响应状态吗。
常见的HTTP状态码：
200：请求成功。
202：请求被接收但处理未完成。
400：错误请求。
404：需要访问的资源不存在.
500：服务器内部错误。
statusText：服务器返回状态码对应的文本。
onreadystatechange：当readyState属性发生变化时触发此事件，用于触发回调函数。

3.设置请求参数

xhr.open(method, url, async，username，password);

method参数，必选参数，用来指定发送请求的HTTP方法，取值为GET或POST或PUT或DELETE或HEAD，参数名要大写。
url参数，必选参数，用来指定所调用资源的URL。
async参数，可选参数，用来指定请求是否为异步，默认是true。若要发送同步请求，则取false。
username和password参数，可选参数，在需要服务器验证访问用户情况时可以设置。

4.发送请求

xhr.send();

若是POST请求，则一定要设置请求头的格式内容！！！

//设置请求头
xhr.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
xhr.send("name=" + name  + "&id=" + id);

AJAX传递参数时GET和POST请求的区别
参数被编码为名/值对，名/值对采用name=value的形式，不同参数之间用与号（&）连接，注意中间不能有空格。

GET请求把参数放在请求URL中传递。格式为：
URL？name1=value&name2=value2
POST请求把参数放在send()方法中传递。

参考资料：
1.《Web应用开发——基于Spring MVC + MyBatis + Maven》
2.https://zhuanlan.zhihu.com/p/59178216
3.https://zhuanlan.zhihu.com/p/33809782
4.http://www.doc88.com/p-182718571043.html