微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

AJAX 原生JS处理

AJAX

同步、异步

同步:必须等待当前事情完成后才可进行其他事情
异步:不需要等待其他事情完成即可运行,多件事情同时进行,互不干扰
计时器等,为异步代码,他不会影响其他代码的正常执行(异步的代码自己不影响其他顺序,而不是其他代码不影响异步代码顺序)

AJAX,异步操作,异步JS和XML的结合。在不重新刷新界面的情况下,更新界面数据,在请求数据时候,不影响本地操作的正常响应

请求及处理步骤:

1、创建对象

XMLHttpRequest ie7以上
ActiveXObject(‘Microsoft.XMLHTTP’) ie5-6
var xhr = new XMLHttpRequest();
兼容性设置:通过if else判断,调用不同的参数

2、初始化,设置请求方法和url

xhr.open(推送方式,url,是否异步)
请求参数:推送方式post/get,url,是否异步ture/flase
get:可在url内直接放入参数
如果是post,需要设置请求头告诉服务端你的请求体的格式

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Http请求体

请求报文

行   GET/POST等  url的参数拼接   HTTP/1.1
头   Host:网址
	Cookie:name=XX
	Content-type:application/json
	User-Agent:chrome 83	
空行
请求体 post必须有 get因为已经在行内拼接可没有 
		username=XX&password=XXX

相应报文

行 HTTP/1.1 200 OK
头 Content-type:test/html;charset=utf=8
	Content-length:2048
	……
空行
体 html的具体内容/json等,根据格式返回

3、发送

xhr.send(String) 发送请求,参数在post需要发送参数时候传送,为加密的内容

4、事件绑定 AJAX的触发异步事件,处理服务端返回的结果

onreadystatechange事件,用于接收返回结果,当 xhr.readyState 的值改变的时候,callback 函数会被调用
AJAX状态代码readystate:0-5个状态码,4为完成

xhr.onreadystatechange = function(){

	if(xhr.readystate ===4){
		if(xhr.status >=200 &&xhr.status <=300)	{
    // Process the server response here.			
		}
	}
};//当状态码为4,响应码为200时候,即可解析进行后续操作

服务器返回

xhr.response 返回响应的正文
xhr.responseType 相应正文的类型,最常见的为json、document:XML或者HTML类型 text 为空字符串时,采用认类型 DOMString,与设置为 text 相同。通过设置responseType可自动转换json为对象
也可手动转换,通过JS的JSON.parse()对象,可将其手动转为对象
xhr.status 响应码 200 成功 404 未找到 500 未知异常
xhr.responseText 以字符串形式获取响应数据
xhr.responseXML 以XML获取相应数据

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐