ajax的使用

最新推荐文章于 2022-05-04 09:33:04 发布

爱窦

最新推荐文章于 2022-05-04 09:33:04 发布

阅读量281

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_44342481/article/details/114675964

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax简介

Ajax概念
Ajax 是Web 开发一个流行的词汇，全称 Asynchronous JavaScript and XML，异步的JavaScript和XML 。是几种技术的强强联合。

Ajax如何工作
Ajax（即异步 JavaScript 和 XML）是一种 Web 应用程序开发的手段，它采用客户端脚本与 Web 服务器交换数据。

为什么要学习Ajax
使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

Ajax应用到的技术
基于 DHTML 和 CSS 的标准 Web 页面内容
由 DOM(Document Object Model)实现动态显示与交互
通过 XML 和 XSLT 进行数据交换以及处理
运用 XMLHttpRequest 对象实现异步数据获取
运用 JavaScript 整合上述技术

Ajax交互

Ajax 交互流程
1、用户在 Web 页面的交互动作触发 DOM 事件
2、DOM事件处理者收到事件发生的消息处理
3、事件处理者创建 XMLHttpRequest 对象，设置目标URL、HTTP方法(Get、Post)等内容，注册服务器响应的回调函数
4、向服务器发生异步的HTTP请求
5、异步请求发出后，浏览器不必等待服务器响应，用户可以继续与页面交互
6、服务器收到请求后，指派对应的 Servlet 处理对应逻辑
7、将结果数据序列化成 XML 作为响应内容，返回给浏览器
8、调用在XMLHttpRequest对象上注册的回调函数
9、回调函数解析响应内容 XML文档，依据其中的数据使用JavaScript 操纵DOM对象更新页面内容
（局部刷新）

Ajax开发步骤

Ajax Hello World程序
用 Ajax 完成一个简单的 HelloWorld 程序步骤
新建 html 或者 jsp 页面
在页面中写出创建 XMLHttpRequest 对象的方法
写出事件响应方法，用上面创建的对象发出异步的 Ajax 请求
创建 Servlet 响应请求
在页面完成回调方法，处理服务器端响应，改变页面效果

（Ajax实际上使用的是XMLHttpRequst对象）

XMLHttpRequest对象简介

XMLHttpRequest对象简介
XMLHttpRequest对象是整个Ajax开发的基础
提供客户端和服务器异步通信的能力
能够向服务器发出请求
能够接收服务器的返回页面
最早出现在IE，随着应用的广泛，渐渐推广到其他浏览器中

XMLHttpRequest对象创建

创建XMLHttpRequest对象
不同的浏览器创建方法不同
IE5.5或以上版本浏览器
new ActiveXObject(‘XMsxml2.XMLHTTP’)
较老版本的IE浏览器
new ActiveXObject(‘Microsoft.XMLHTTP’)
不支持ActiveX控件的浏览器
new XMLHttpRequest()
一般用三层嵌套方式来创建

XMLHttpRequest对象的方法

XMLHttpRequest 对象的方法
abort：取消当前的 HTTP 请求
getResponseHeader：获得响应内容的HTTP头信息
open：初始化一个 HTTP 请求，指定请求方法(Get/Post)、URL、身份验证信息等
send：发送一个 HTTP 请求到服务器
setRequestHeader：设置 HTTP请求的头信息

XMLHttpRequest对象属性

XMLHttpRequest 对象的属性
(1)就绪状态readystate:描述HTTP请求的状态
0 表未初始化，即XMLHttpRequest 对象未创建open()方法未调用
1 表XMLHttpRequest对象被创建，但请求未发出send()未调用
2 表HTTP请求已经发出正在处理中，这时可以取得HTTP头信息，但是HTTP内不可用
3 表HTTP响应内容部分数据可用，但响应还没有完成
4 表服务器响应完成，可以从属性 responseBody、responseText 中获得完整响应内容
(2)响应主体 responseBody：以无符号字节数组描述响应内容正文
(3)响应流 responseStream：以 IStream(二进制数据流) 形式描述响应内容正文
(4)响应文本 responseText：响应内容正文的纯文本形式
(5)响应 XML responseXML：以XML Dom 对象描述响应内容正文
(6)状态代码 status：HTTP 状态码，常见的有200、404等
(7)onreadystatechange：指定当发生就绪状态变更事件时的处理者，通常是JavaScript 函数

用open方法创建一个请求
open(method,url,asynchronous,user,pwd)
method: 请求类型，get或post
url: 请求地址，可以绝对也可以相对，可以附带查询字符串
Asynchronous: 可选参数，请求同步还是异步，默认为true
user,pwd: 可选参数，请求的用户名和密码，没有则省略
例： xmlhttp.open(“get”,“ajax.jsp?aa=bb&cc=dd”)

使用XmlHttpRequest向服务器发请求

如果使用“get”方式发出请求，可以用下述办法
url=“ajax.jsp?aa=bb&cc=dd”;
xmlhttp.open(“get”,url);
Xmlhttp.send(null);
GET请求有缓存问题，一般在url加随机数r= Math.random()

如果使用“post”方式发出请求，必须用下述方法
url=“ajax.jsp”; body=“aa=bb&cc=dd”;
xmlhttp.open(“post”,url);
xmlhttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
Xmlhttp.send(body);
注意，如果url中包括查询字符串，则会显示在浏览器地址栏中

send方法发送一个请求
send(body)
body为参数，表示发送至服务器的数据，格式为查询字符串格式
例： body=“username=aa&password=bb”
同步还是异步：
如果使用同步方法，执行完send方法后阻塞，直到请求完成或超时才执行下一句语句
如果使用异步方法，执行完send方法后不阻塞，立刻执行下一句语句

XMLHttpRequest对象应用

使用onreadystatechange事件捕获请求的状态变化
xmlhttp.onreadystatechange=function(){
……事件处理代码
}
xmlhttp.open();
xmlhttp.send();
事件绑定代码必须先于open和send代码，否则可能引起事件代码无法得到执行

XMLHttpRequest对象处理响应

使用responseText获得返回的文本
responseText可以获得以文本形式返回的数据结果，也就是所请求网页的html代码

使用responseXML获得返回的XML文档
使用该方法须确定服务器端返回的是XML格式文档
responseXML可以获得以XML形式返回的数据结果，其中，该XML文档已经解析完毕

XMLHttpRequest对象处理响应

其它XMLHttpRequest对象属性和方法
Xmlhttp.abort() 立即中止请求的发送
responseBody 返回未解码的二进制数据
statusText

实例（Jquery封装的ajax）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
						$(function(){
							$.ajax({
								url:"data.json",//请求地址，默认当前页面
								type:"get",//请求方式get和post默认get
								data:"",//请求传递的数据,格式a=1&b=2，多个参数用&号隔开
								dataType:"json",//服务器响应回来的数据按此格式进行解释，默认返回text
								success:function(result){//服务器成功响应后回调函数，传递返回的数据给函数参数result
								console.log(result);
									$("#id").html(result.id);
									$("#name").html(result.name);
									$("#age").html(result.age);
								},
								error:function(XMLHtttpRequest,textStatus,errorThrown){
									//响应失败后调用该方法
									console.log(textStatus);
								}				
							});
						});
		</script>
	</head>
	<body>
		编号：<span id="id">
			
		</span>
		姓名：<span id="name">
			
		</span>
		年龄：<span id="age">
			
		</span>
	</body>
</html>

格式转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var s = {
				id: 1,
				name: "张三",
				age: 20
			}
			//jsob格式：键值对都要用""括起来用\进行转义（除了数字）
			var s = "{\"id\":1,\"name\":\"张三\",\"age\":20}"; 
			// console.log(s);
			//json格式字符串转换成对象
			var ss = JSON.parse(s);
			// console.log(ss);
			//js 对象转换成json格式字符串
			var str = JSON.stringify(s);
			console.log(str);
		</script>
	</head>
	<body>
	</body>
</html>

爱窦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax的使用

Ajax简介Ajax概念Ajax 是Web 开发一个流行的词汇，全称 Asynchronous JavaScript and XML，异步的JavaScript和XML 。是几种技术的强强联合。Ajax如何工作Ajax（即异步 JavaScript 和 XML）是一种 Web 应用程序开发的手段，它采用客户端脚本与 Web 服务器交换数据。为什么要学习Ajax使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改
复制链接

扫一扫