原生Ajax入门，看这一篇事半功倍

最新推荐文章于 2024-04-25 13:56:39 发布

Yannnnnm

最新推荐文章于 2024-04-25 13:56:39 发布

阅读量133

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Yannnnnm/article/details/109656579

版权

4 篇文章 0 订阅

订阅专栏

Ajax（Asynchronous JavaScript + XML）：异步JavaScript和XML，是为了网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面；

var xhr=new XMLHttpRequest();

这里命名尽量用xhr

open方法中需要传入两个参数，分别为请求方式和请求地址

//请求方式为get
xhr.open("get","请求地址?需要请求的数据")
//请求方式为post
xhr.open("post","请求地址")

这里如果请求方式为post需要设置请求头

xhr.setRequestHeader('Content-type","application/x-www-form-urlencoded")

为什么要加请求头
默认情况下, 服务器对POST请求和提交web表单的请求并不会一视同仁. 因此, 服务器端必须有程序来读取发送过来的原始数据, 并从中解析出有用的部分

xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
	//获取响应体
	xhr.responseText
	//请求xml
	xhr.responseXML

为什么要写xhr.readyState==4判断条件
要了解这个需要先知道XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。并且XHR 代理总是处于下列状态中的一个：

0 UNSENT
XMLHttpRequest 代理已被创建，但尚未调用 open() 方法。
-1 OPENED
open() 方法已经被触发。在这个状态中，可以通过 setRequestHeader() 方法来设置请求的头部，可以调用 send() 方法来发起请求。
2 HEADERS_RECEIVED
send() 方法已经被调用，响应头也已经被接收。
3 LOADING
响应体部分正在被接收。如果 responseType 属性是“text”或空字符串， responseText 将会在载入的过程中拥有部分响应数据。
4 DONE
请求操作已经完成。这意味着数据传输已经彻底完成或失败。
注意： 在IE中，状态有着不同的名称，并不是 UNSENT，OPENED ， HEADERS_RECEIVED ， LOADING 和 DONE, 而是 READYSTATE_UNINITIALIZED (0)，READYSTATE_LOADING (1) ， READYSTATE_LOADED (2) ， READYSTATE_INTERACTIVE (3) 和 READYSTATE_COMPLETE (4) 。
所以在这里我们一般直接控制条件等于4，一方面是为了兼容IE，另外的一个方面是因为当状态为4的时候是确定数据完全传输完成

// 1.创建转换对象
var parser=new DOMParser();
//2.调用转换方法
var obj=parser.parserFromString(需要转换的内容，需要转换的类型)

ajax在提交、请求、接收时，都是异步进行，网页不需要刷新，只刷新页面局部，不关心也不影响页面其他部分的内容。
Form提交则是新建一个页面，哪怕是提交给自己本身的页面，也需要刷新，为了维持页面用户对表单的状态改变，要在控制器和模板之间传递更多参数以保持页面状态。
ajax提交时，是在后台新建一个请求。
Form却是放弃本页面，然后再请求。
ajax必须要用js来实现，存在调试麻烦、浏览器兼容问题，而且不启用js的浏览器，无法完成操作。
Form表单是浏览器自带的，无论是否开启js，都可以提交表单。
ajax在提交、请求、接收时，整个过程都需要使用程序来对其进行数据处理。
Form表单提交，是根据表单结构自动完成，不需要代码干预。用submit提交。