ajax技术的应用

最新推荐文章于 2022-09-08 21:08:12 发布
最新推荐文章于 2022-09-08 21:08:12 发布
阅读量333 收藏
点赞数
分类专栏： 前端 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1610770854/article/details/52089208
版权

1.数据源为text

test1.html

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax Demo</title>
<script>
	window.onload = function(){
		//1.获取a1节点，并注册其绑定事件
		document.getElementById("a1").onclick = function(){
			//3.创建一个XMLHttpRequest对象
			var request = new XMLHttpRequest();
			
			//4.准备发送请求数据：url
			var url = this.href + "?time=" + new Date();    //加上时间戳可以有效避免缓存，让每一次请求所得的url唯一
			var method = "GET";
			//5.调用XMLHttpRequest对象 open方法
			request.open(method,url);
			
			//6.调用XMLHttpRequest对象 send方法
			request.send(null);
			
			
			//7.为XMLHttpRequest对象 添加onreadystatechange事件
			request.onreadystatechange = function(){
				//8.判断响应是否完成：XMLHttpRequest对象的readyState属性为4的时候
				if(request.readyState == 4){
					//9.判断响应是否可用：XMLHttpRequest对象的status属性为200的时候
					if(request.status == 200 ||request.status == 304){
						//10.打印响应结果：responseText
						alert(request.responseText);
					}
				}
			}
			//2.取消a1节点的默认行为
			return false;
		}
	}
</script>
</head>

<body>
	<a href = "hello.txt" id = "a1">hello ajax</a>
</body>
</html>

2.数据源为html

test2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>htmlDemo</title>
<script>
	window.onload = function()
	{
		var aNodes = document.getElementsByTagName("a");
		for(var i = 0 ; i < aNode.length;++i)
		{
			
			aNodes[i].onclick = function()
			{
				
				var request = new XMLHttpRequest();
				var method = "GET";
				var url = this.href + "?time" + new Date();
				
				request.open(method,url);
				request.send(null);
				request.onreadystatechange = function()
				{
					if(request.readyState == 4)
					{
						if(request.status == 200 || request.status == 304)
						{
							document.getElementById("details").innerHTML = request.responseText;
						}
					}						
				}
				return false;
			}
		}
	}
</script>
</head>
<body>
	<h1>HTML</h1>
	<ul>
		<li>
			<a href = "files/1.html">1.html</a>
		</li>
		<li>
			<a href = "files/2.html">2.html</a>
		</li>
		<li>
			<a href = "files/3.html">3.html</a>
		</li>
	</ul>
	<div id = "details"></div>
</body>
</html>

3.数据源为json

test3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsonDemo</title>
<script>
	window.onload = function()
	{
		document.getElementById("a1").onclick = function()
		{
			var request = new XMLHttpRequest();
			var url = this.href + "?time" + new Date();
			var method = "GET";
			
			request.open(method, url);
			request.send(null);
			request.onreadystatechange = function()
			{
				if(request.readyState == 4)
				{
					if(request.status == 200 ||request.status ==304)
					{
						var result = request.responseText;
						var obj = eval("("+ result+")");   //json必须这样解析
						
						var pNode1 = document.createElement("p");
						pNode1.appendChild(document.createTextNode(obj.person.name));
						
						var pNode2 = document.createElement("p");
						pNode2.appendChild(document.createTextNode(obj.person.password));
						
						var pNode3 = document.createElement("p");
						pNode3.appendChild(document.createTextNode(obj.person.website));
						
						var div = document.getElementById("details");
						div.innerHTML = "";
						div.appendChild(pNode1);
						div.appendChild(pNode2);
						div.appendChild(pNode3);
					}
				}
			}
			return false;
		}
	}
</script>
</head>
<body>
	<h1>JSON</h1>
	<a href = "files/1.js" id = "a1" >1.js</a>
	<div id = "details"></div>
</body>
</html>

4.数据源为XML

test4.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>xmlDemo</title>
<script type="text/javascript">
	window.onload = function()
	{
		document.getElementById("a1").onclick = function()
		{
			var request = new XMLHttpRequest();
			var method = "GET";
			var url = this.href + "?time" + new Date();
			
			request.open(method, url);
			request.send(null);
			
			request.onreadystatechange = function()
			{
				if(request.readyState == 4)
				{
					if(request.status == 200 || request.status == 304)
					{
						//1.结果为XMl格式，所以要使用responseXML来获取
						var result = request.responseXML;		
						//2.结果不能直接使用，必须先创建节点，再加入节点
						/*目标格式为<h1>xixixixixixix</h1>
						<p>yoyoyoyoyoyo</p>*/
						var name = result.getElementsByTagName("name")[0].childNodes[0].nodeValue;
						var password = result.getElementsByTagName("password")[0].childNodes[0].nodeValue;
						var website = result.getElementsByTagName("website")[0].childNodes[0].nodeValue;
						
						var h1Node = document.createElement("h1");
						h1Node.appendChild(document.createTextNode(name));
						
						var pNode = document.createElement("p");
						pNode.appendChild(document.createTextNode(password));
						
						var pNode2 = document.createElement("p");
						pNode2.appendChild(document.createTextNode(website));
						
						var detailsNode = document.getElementById("details");
						detailsNode.innerHTML = "";
						detailsNode.appendChild(h1Node);
						detailsNode.appendChild(pNode);
						detailsNode.appendChild(pNode2);
					}
				}
			}
			return false;
		}
		
	}
</script>
</head>
<body>
	<h1>XML</h1>
	<a href = "files/1.xml" id = "a1">1.xml</a>
	<div id = "details"></div>
</body>
</html>

5.jQuery使用ajax

$.ajax({
    url: "http://www.hzhuti.com",    //请求的url地址
    dataType: "json",   //返回格式为json
    async: true, //请求是否异步，默认为异步，这也是ajax重要特性
    data: { "id": "value" },    //参数值
    type: "GET",   //请求方式
    beforeSend: function() {
        //请求前的处理
    },
    success: function(req) {
        //请求成功时处理
    },
    complete: function() {
        //请求完成的处理
    },
    error: function() {
        //请求出错处理
    }
});
$.get(url, param, function(dom) { $('div.get').append(dom) }) ;
$.post('Server.aspx', { id: idValue }, function (text, status) { alert(text); });








林花谢了春红
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax 技术应用
abu1216的博客
12-02 380
1.Ajax 简介 1.1Ajax 是什么？ Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。 传统Web应用中简易的同步模型分析，如图-1所示： 基于Ajax技术的异步请求响应模型分析，如图-2所示： 1.2Ajax 技术应用场景？ Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体.
Ajax及其应用
qq_53826231的博客
03-20 78
返回值：得到一个包含send()方法的对象。用于指定HTTP请求方法，支持所有HTTP的方法，如GET,POST，head。在调用oepn()方法准备好一个请求后，还需要把该请求发送到服务器，这时就需要调用send()方法。send()方法中包含了一个可选的参数，该参数可以包含可变类型的数据。请求的资源就是URL的地址，请求的方式有GET,HEAD,POST,浏览器向服务器发送的内容称之为请求，客户端给浏览器返回的结果称之为相应。该方法用来设置请求的头部信息，该方法的调用必须在调用open()方法之后。
Ajax的应用
wk3510的博客
09-08 625
1.json：一个对象表示方式，用来在系统界面层和控制器之间的数据传递，或者多个系统的数据传递两种类型：A.对象：{属性：属性值，属性：属性值数字、boolean不需要加引号，字符串需要加引号B.数组：[{}，{}]2. 如果响应的json,最好是在Servlet里添加响应类型为如下。
Ajax技术应用
weixin_46422151的博客
04-05 201
Ajax是什么 Ajax(Asynchronous JavaScript and XML) 是一种web应用技术，可以借助客户端脚本（javascript）于服务端应用进行异步通信，获取服务器端数据以后，进行局部刷新，进而提高数据的响应和渲染速度。 传统的Web应用中简易的同步模型分析如下图 基于Ajax技术的异步请求响应模型分析。如下图 传统Web应用中的，同步请求应用时序模型分析 客户端向服务端向服务端发送请求需要等待服务端的响应结果，服务端返回数据以后，客户端可以继续发送请求。 基于Ajax
ajax 技术基本应用
06-15
ajax 技术，一些简单的技术应用!.............
AJAX技术汇总
02-04
【导读】AJAX全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。本文汇总了它的相关技术知识。　AJAX全称为“AsynchronousJavaScriptandXML”（异步...
Web中的Ajax技术应用研究.pdf
最新发布
01-03
Web中的Ajax技术应用研究.pdf
AJAX技术详解及应用
06-15
网站当前流行的技术及时AJAX,很多人都不了解及运用，此书详细介绍了AJAX运用。
Ajax技术应用.ppt
12-01
Ajax (Asynchronous JavaScript and XML)不是一个新的技术，事实上，它是一些旧有的成熟技术以一种全新的更加强大的方式整合在一起
ajax技术的应用及总结
THE GUY的个人专栏
11-03 2307
Ajax（Asynchronous JavaScript and XML）是一个结合了Java技术、XML、以及JavaScript的web开发模式，可以让你构建基于Java技术的Web应用，解决了web开发中经常碰到的页面重载问题（即不需要页面刷新便可轻易实现服务器端数据的获取）       本例中的应用是基于java的Servlet技术(也可以很容易的扩展到bean中实现)，共需要创建三个
Ajax的实际应用
weixin_44579862的博客
08-18 448
首先介绍下什么是ajax， AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。 AJAX 并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的 web 应用程序。 AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。 通过在幕后与 web 服务器交换数据，而不是每当用户作出改变时重载整...
web前端开发——AJAX入门
Aldeo
12-21 3101
AJAX: A New Approach to Web Applications XML AJAX是老技术新思想。它所包含的内容我们之前都接触过。
【HTML】全部网络状态码说明
weixin_42282783的博客
09-15 210
全部HTML状态码 HTTP状态码表示客户端HTTP请求的返回结果、标记服务器端的处理是否正常或者是出现的错误，能够根据返回的状态码判断请求是否得到正确的处理很重要。 一. 状态码分类表 类别 原因 1xx Information（信息状态码） 接受的请求正在处理 2xx Success（成功状态码） 请求正常处理完毕 3xx Re
ajax中包含哪些技术,jQuery之ajax技术的详细介绍
weixin_33390343的博客
08-05 466
1：Ajax技术包含以下几点：基于Web标准(XHTML + CSS)的展示使用DOM进行动态显示和交互使用XMLHttpRequest进行数据交换和相关操作使用javascript将所有内容绑定在一起Ajax的核心是JavaScript的XMLHttpRequest对象，它是一种支持异步请求的技术。简而言之，使用JS可以控制XMLHttpRequest对象向服务器提出请求并处理响应，而不影响用户...
关于ajax的应用
行云流水
10-20 1515
现在ajax很流行，很红火。但是，在企业应用系统的开发中，还是要慎用ajax，主要有以下几个原因：1.ajax是属于"锦上添花"的技术，若整个应用系统都没做好，还要添加ajax的用户体验，这种本末倒置做法，要不得。有了"锦"之后，才需要花;没有"锦",花放在哪呢?2.能不用ajax的地方，坚决不用ajax。因为javascript的代码太难调试了，那还不如刷新一下呢，省了好多开发时间3.防止太多(
AJAX及其在JavaScript中的应用
Hopefully Sky的博客
06-03 4874
1、什么是AJAX(远程脚本编程)　　AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。 　　如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交
小米2019秋招安全开发笔试题（A）
kelxLZ的博客
12-29 1157
1、关于数字签名说法错误的是 确定消息确实是由发送方签名并发出来的 数字签名能确定消息的完整性 私钥用于签名，公钥用于验证 2、CORS的作用是？ 允许客户端获取服务器的返回数据 3、下面关于AJAX说法正确的是？ AJAX可以完成数据的跨域 错误的是： AJAX可以给不同域发送数据 AJAX可以获取不同域的数据 AJAX使用了同步技术 4、MD5是？ 哈希算法 5、在linux中，将文件属性设置为所有者只读，其余无任何权限的命令为(假设文件名为myfile) chmod 400 my
Ajax技术的作用是什么
06-10
Ajax技术是一种用于开发Web应用程序的前端技术，它的作用是在不刷新整个页面的情况下向服务器发送异步请求并更新部分页面内容，从而提高Web应用程序的交互性和用户体验。 具体来说，Ajax技术可以实现以下功能： 1....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值