HTML5 混合APP开发学习笔记（十）——AJAX通信

最新推荐文章于 2024-03-25 14:30:37 发布

123，机器人

最新推荐文章于 2024-03-25 14:30:37 发布

阅读量414

点赞数

分类专栏： HTML5混合APP 文章标签： AJAX

本文链接：https://blog.csdn.net/weixin_43569314/article/details/90452255

版权

HTML5混合APP 专栏收录该内容

17 篇文章 6 订阅

订阅专栏

AJAX通信

简介

AJAX（Asynchronous JavaScript and XML，即异步JavaScript和XML），是一种用于创建快速动态网页的技术，可以对网页的部分进行刷新，而传统网页需要重新加载整个页面。
AJAX应用程序的优势在于：
（1）通过异步模式，提升了用户体验；
（2）优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用；
（3）AJAX引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

AJAX 工作原理

在浏览器界面触发事件，然后创建一个XMLHttpRequest对象，将XMLHttpRequest对象发送给服务端
服务端处理XMLHttpRequest对象，并将数据回传给浏览器
浏览器使用JavaScript处理回传的数据，局部更新页面
¹

XMLHttpRequest 对象

流程图：

创建 XMLHttpRequest 对象：variable=new XMLHttpRequest();
创建HTTP请求：open(method,URL[,asyncFlag[,“userName” [, “password”]]])
1. method：HTTP请求方法
2. URL：请求的URL地址，可以为网址或本地文件
3. asyncFlag：布尔型，指定此请求是否为异步方式，默认为true（异步）
4. userName，password：是指服务器验证需要的用户名和密码，可省略
设置状态改变时的事件：XMLHttpRequest对象有个属性readyState，它有5个值，分别对应了5个状态：
1. 未初始化，对象已创建，但还未使用open方法
2. 正在加载，还未使用send方法
3. 已加载，send方法已使用，但当前的状态未知
4. 交互中，接收了部分数据
5. 完成，数据接收完毕
发送HTTP请求：XMLHttpRequest对象的 send() 方法负责发送HTTP请求
- 若请求中不包含请求正文：xhr.send(null);
- 若请求包含正文：xhr.send(“a=2&b=3”);仅用于POST请求
获取异步返回的数据：XMLHttpRequest对象在数据接收完成后，需要使用status或statusText属性，来判断请求是否成功，status和statusText属性返回当前请求的响应状态代码和状态描述
例：

function loadXMLDoc()
{
	//创建XMLHttpRequest对象
	var xmlhttp=new XMLHttpRequest();
	//readyState属性值改变时触发该函数
	xmlhttp.onreadystatechange=function()
	{
		//readyState状态码为4，表明服务器已响应
		//status为200，表明请求成功
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			//处理返回的数据responseText
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	//创建HTTP请求
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	//发送HTTP请求
	xmlhttp.send();
}

FormData对象

创建FormData对象的两种方式:
1. var formData=new FormData();
  formData.append(key,value);
  key:value是键值对
2. var oform=document.getElementById(“myForm”);
  var formdata=new FormData(oform);
发送FormData数据：xmlhttp.send(formdata)
解析XML数据：
当使用XMLHttpRequest请求数据，返回的是XML格式时，就需要用到它的另一个属性responseXML，这个属性代表一个XML DOM对象，可以专门用来解析XML格式数据，这个XML DOM对象提供了个getElementsByTagName方法（和HTML DOM的方法一样），可以根据标签名来得到数据

var bookname=xhr.responseXML.getElementsByTagName("title")[0].childNodes[0].nodeValue;

jQuery中的AJAX方法

get方法:$.get(URL [,data] [,function(data,status,xhr)] [,dataType])
post方法:$(selector).post(URL [,data] [,function(data,status,xhr)] [,dataType])
²

get方法获取json数据:$(selector).getJSON(url,data,success(data,status,xhr))
success(data,status,xhr):当请求成功时运行的函数。
底层方法:$.ajax({name:value, name:value, … })