使用Ajax实现异步通信（3）：使用Ajax

最新推荐文章于 2022-05-06 10:43:40 发布

无知的小菜鸡

最新推荐文章于 2022-05-06 10:43:40 发布

阅读量450

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_41897680/article/details/106296650

版权

JavaScript 专栏收录该内容

35 篇文章 6 订阅

订阅专栏

Ajax是利用JavaScript脚本与XML数据实现客户端与服务器进行异步通信的一种方法

定义XMLHttpRequest对象

XMLHttpRequest对象提供了与服务器通信的协议，浏览器可以通过XMLHttpRequest对象向服务器发送请求，并使用JavaScript处理响应信息，然后在DOM中显示数据

XMLHttpRequest对象属性

属性	说明
onreadystatechange	指定当readyState属性改变时的事件处理函数
readyState	返回当前响应的请求状态
status	返回当前请求的HTTP状态码
statusText	返回当前请求的相应行状态
responseBody	返回正文信息
responseStream	以文本流的形式返回响应信息
responseText	以字符串的形式返回响应信息
responseXML	以XML数据的形式返回响应信息

XMLHttpRequest对象方法

方法	说明
open()	创建一个新的HTTP请求，并指定此请求的方法、URL、以及验证信息
send()	发送请求到HTTP服务器并接收回应
getAllResponseHeaders()	获取响应的所有HTTP头信息
getResponseHeader()	从响应信息中获取指定的HTTP头信息
setRequestHeader()	单独指定请求的某个HTTP头信息
abort()	取消当前请求

实现异步通信步骤
（1）定义XMLHttpRequest示例对象
（2）调用XMLHttpReques对象的open方法打开服务器端URL地址
（3）注册onreadstatechange事件处理函数，准备接收响应数据，并进行处理
（4）调用XMLHttpReques对象的send方法发送请求

示例： 定义XMLHttpRequest对象功能进行封装

function ctrateXMLHTTPObject(){
 var XMLHttpFactories = [
	 function () {return new XMLHttpRequest()},
	 function () {return new ActiveXObject("Msxml2.XMLHTTP")},
	 function () {return nre ActiveXObject("Microsoft.XMLHTTP")}
 ]
 var xmlhttp = false
 for (var i = 0; i<XMLHttpFactories.length; i++){
	 try{
		 xmlhttp = XMLHttpFactories[i]() //执行匿名函数
	 }catch(e){
		 continue       //发生异常，则继续下一个函数调用
	 }
	 break      //如果成功，终止循环
 }
 return xmlhttp
}

建立XMLHtppRequest连接

open方法

XMLHttpRequest对象.open(method,url,async)

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send方法

XMLHttpRequest对象.send(varBody)

参数varBody表示将通过该请求发送的数据，如果不传递数据，可以设置为null
该方法的同步或异步取决于open方法，open方法采用异步，该方法将立即返回，否则会等待请求完成或者超时才返回

GET请求与POST请求

GET请求适合传递一些简单的信息，不易传输大容量或加密数据。服务器能够在URL尾部的查询字符串中接收用户传递过来的信息
示例：

window.onload=function(){
	btn.onclick=function(){
	//设置向服务器端发送请求的文件，以及传递的参数信息
		var url="server.php?key=value" 
	}
}

POST请求支持发送任意格式、任意长度的数据，一般多用于表单提交

示例

window.onload=function(){
	btn.onclick=function(){
		xmlhttp.send("key=value")
	}
}

注：无论是get请求还是post请求，都是以名值对字符串的形式发送数据，名值对直接通过&符连接

获取数据

原则：
如果向页面中添加大块数据时，选择HTML格式会比较方便
如果需要协作开发，且项目庞杂，选择XML格式会更通用
如果要检索复杂的数据，且结果复杂，选择JSON格式更轻便

获取XML数据
note.xml

<？xml version="1.0" encoding="utf-8" ?>
<note>
	XML数据
</note>

JavaScript

var xmlhttp = new XMLHttpRequest()
xmlhttp.open("GET", "note.xml ")
xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState == 4) {
		var info = xmlhttp.responseXML
		alert(info.getElementsByTagName("note")[0].firstChild.data)
	}
}
xmlhttp.send(null)

获取HTML文本

html

<p style="font-size: 20px;color: #0000FF;">获取HTML文本</p>

JavaScript

<body>
	<div id="data"></div>
	<script type="text/javascript">
		var x = new XMLHttpRequest()
		x.open("GET", "data.html")
		x.onreadystatechange = function() {
			if (x.readyState == 4) {
				var div = document.getElementById("data")
				div.innerHTML = x.responseText
			}
		}
		x.send(null)
	</script>
</body>

获取JavaScript脚本
脚本

function (){
	var d=new Date()
	return d.toDateString()
}

客户端执行

var x = new XMLHttpRequest()
x.open("GET", "server.js")
x.onreadystatechange = function() {
	if (x.readyState == 4) {
		var info = x.responseText
		var o = eval("(" + info + ")" + "()")
		alert(o)
	}
}
x.send(null)

注：一般很少使用JavaScript代码作为响应信息的格式，因为它不能够传递更丰富的信息，同时JavaScript脚本极易引起安全问题

获取JSON数据
通过XMLHttpRequest对象的responseText属性获取返回JSON数据字符串，然后可以使用eval()方法将其解析为本地JavaScript对象，从该对象中再读取想要的信息

JSON数据
示例1： 将JSON对象字符串转换为本地对象

{
	"name": "Tom",
	"age": 15
}

JavaScript

<script type="text/javascript">
var x = new XMLHttpRequest()
x.open("GET", "server.js")
x.onreadystatechange = function() {
	if (x.readyState == 4) {
		var info = x.responseText
		var o = eval("(" + info + ")") //将JOSN对象字符串转换为对象
		console.log(typeof o)
	}
}
x.send(null)

示例2： 将JSON数组字符串转换为本地数组

["Tom", 15]

var x = new XMLHttpRequest()
x.open("GET", "server.js")
x.onreadystatechange = function() {
	if (x.readyState == 4) {
		var info = x.responseText
		var o = eval(info) //将JOSN数组字符串转换为数组
		console.log(info,o)
	}
}
x.send(null)

注：数组也是对象，JSON数组字符串可以转换为对象，但是JSON对象字符串不能转换为数组

无知的小菜鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用Ajax实现异步通信（3）：使用Ajax

Ajax是利用JavaScript脚本与XML数据实现客户端与服务器进行异步通信的一种方法定义XMLHttpRequest对象XMLHttpRequest对象提供了与服务器通信的协议，浏览器可以通过XMLHttpRequest对象向服务器发送请求，并使用JavaScript处理响应信息，然后在DOM中显示数据XMLHttpRequest对象属性属性说明onreadystatechange指定当readyState属性改变时的事件处理函数readyState返回当前响应的
复制链接

扫一扫