Ajax技术应用

最新推荐文章于 2023-03-20 19:01:28 发布
最新推荐文章于 2023-03-20 19:01:28 发布
阅读量85 收藏
点赞数
文章标签： json java python
原文链接：https://my.oschina.net/ProgramerLife/blog/2055988
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1. 相关概述

    1. ajax：即异步js与xml，可以实现客户端与服务端之间数据的异步交互。对于普通的B/S 模式是采用的同步方式，即一次请求必须等待一次服务器响应完成，而异步则是客户端发送请求后，不需要等待服务器响应，浏览器此时可以继续发送其他请求。

    2. ajax技术可以与服务端数据交互：数据类型有

  • 传输纯文本 text
  • 传输xml
  • 传输json数据（常用）

    3. ajax简单开发步骤（接受纯文本数据响应）：在js中编写代码

  • 首先获取XMLHttpRequest对象xhr，通过该对象来进行数据交互
  • 通过XMLHttpRequest对象与服务器建立连接，使用xhr.open()方法，方法中有3个参数，第一个是请求方式（比如"GET"或"POST"）,第二个参数是请求资源地址（比如"/Servlet/ajax/demo1"）,第三个为true或false，表示是否为异步请求
  • 通过XMLHttpRequest对象发送请求数据，调用 xhr.send()方法，方法中参数代表请求体的内容，比如"username=vn&password=1"
    • 如果是get请求，则send(null)，请求参数直接在open()方法的路径中拼接参数；
    • 如果是post请求，则send("username=vn&password=1")，此外还需要设置一个请求头xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
  • 接受服务器做出的响应，通过xhr.onreadystatechange来监听xhr的状态变化，状态用xhr.readyState来表示，其值用0-4五个数字表示，0表示刚创建XMLHttpRequest对象，1表示连接服务器，但是没有发送请求，2表示发送完请求但服务端还未响应，3表示服务端响应还未完成，4表示响应完成。用xhr.status表示响应状态码，比如200、302、304、500等。
  • 获取相应内容，通过xhr.responseText来获取响应体中的纯文本内容；xhr.responseXML获取响应体中的xml内容,实际上也是一串字符串，但浏览器会自动解析为Document对象；
<!DOCTYPE html>
<html>
  <head>
    <title>Ajax1.html</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    //ajax异步请求实现步骤
    	//首先得到XMLHttpRequest对象
    	function createXMLHttpRequest() {
    		try {
    			//大多数浏览器通过该方法来获取
    			return new XMLHttpRequest();
    		} catch (e) {
    			try {
    				//IE6
    				return new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e) {
    				try {
    					//IE5以下版本
    					return new ActiveXObject("Microsoft.XMLHTTP");
    				} catch (e) {
    					alert("浏览器不支持");
    				}
    			}
    		}
    	}
    	function send(){
    		var xhr=createXMLHttpRequest();
    		//建立连接
    		xhr.open("GET", "/Servlet/ajax/ajax1", true);
    		//发送数据
    		xhr.send(null);
    		//通过XMLHttpRequest对象的状态监听器接收响应
    		xhr.onreadystatechange=function(){
    			//判断是否接受到响应
    			if(xhr.readyState==4&&xhr.status==200){
    				//获取响应体中的纯文本内容
    				var text=xhr.responseText;
    				
    				var h=document.getElementById("h");
    				h.innerHTML=text;
    				//获取响应体中的xml内容,实际上也是一串字符串，但浏览器会自动解析为Document对象
    				//var doc=xhr.responseXML;
    				//获取响应体中的json数据
    				//var =xhr.responseType;
    			}
    		};
    	}
    </script>
  </head>
  
  <body>
    <button onclick="send()">发送请求</button>
    <h3 id="h"></h3>
  </body>
</html>

    4. ajax接受响应的xml数据：xml数据实际上也是一个字符串，比如"<user><name>vn</name></user>"

  • 服务端：需要将响应头设置为resp.setHeader("Content-Type", "text/xml;charset=utf-8");
  • 客户端接受数据通过xhr.responseXML获取响应体中的xml内容,实际上也是一串字符串，但浏览器会自动解析为Document对象 
<!DOCTYPE html>
<html>
  <head>
    <title>Ajax1.html</title>
	
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    //ajax异步请求实现步骤
    	//首先得到XMLHttpRequest对象
    	function createXMLHttpRequest() {
    		try {
    			//大多数浏览器通过该方法来获取
    			return new XMLHttpRequest();
    		} catch (e) {
    			try {
    				//IE6
    				return new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e) {
    				try {
    					//IE5以下版本
    					return new ActiveXObject("Microsoft.XMLHTTP");
    				} catch (e) {
    					alert("浏览器不支持");
    				}
    			}
    		}
    	}
    	function getxml(){
    		var xhr=createXMLHttpRequest();
    		//建立连接
    		xhr.open("GET", "/Servlet/ajax/ajax2", true);
    		//发送数据
    		xhr.send(null);
    		//通过XMLHttpRequest对象的状态监听器接收响应
    		xhr.onreadystatechange=function(){
    			//判断是否接受到响应
    			if(xhr.readyState==4&&xhr.status==200){
    				//获取响应体中的xml内容，得到的是一个document对象，代表着xml文件中的根节点 
    				var doc=xhr.reresponseXML;
    				var user=doc.getElementsByTagName("user")[0];//获取user标签节点
    				var name=user.getAttribute("name");//获取user标签的name属性值
    				var age=user.getElementsByTagName("age")[0];
    				var text=age.textContent;//获取age标签内的文本内容
    				var h=document.getElementById("h");
    				h.innerHTML=name+" "+text;
    			}
    		};
    	}
    </script>
  </head>
  
  <body>
    <button onclick="getxml()">获取xml数据</button>
    <h3 id="h"></h3>
  </body>
</html>

public class AjaxServlet2 extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setHeader("Content-Type", "text/xml;charset=utf-8");
		resp.getWriter().write("<users><user name='vn'><age>18</age></user></users>");
	}
}

    5. 使用Xstream工具类将javaBean转换为xml格式的字符串：需要导入xstream的相关jar包

import org.junit.Test;

import com.thoughtworks.xstream.XStream;

import servlet.JSP.User;

public class XtreamTest {
	@Test
	public void test(){
		XStream xs=new XStream();
		User user=new User();
		user.setName("vn");
		user.setPassword("123456");
		String xml=xs.toXML(user);//通过该方法可以将一个对象转换为xml格式的字符串，但各个标签名可能不是想要的所以进行改造
		System.out.println(xml);
		//不经改造得到的字符串为
		/*
		 * <servlet.JSP.User>
  			<name>vn</name>
  			<password>123456</password>
		   </servlet.JSP.User>
		 */
		
		//改造标签节点名
		xs.alias("user", user.getClass());
        xml=xs.toXML(user);
		System.out.println(xml);
		//改造后
//		<user>
//		  <name>vn</name>
//		  <password>123456</password>
//		</user>
	}
}

    6. ajax通过json数据交互：json数据可以由js来直接解析，这是最常用的一种方式。var json={}，即json是一个对象，json对象有属性名与属性值，属性名必须用双引号；属性值包括null，数值，单引号或双引号括起来的字符串，用[ ]括起来的数组，以及bool值true或false，如果json对象中的属性还是一个json对象，那么就再嵌套一个 { }来表示。比如

{
 "user":{"username":"vn","age":18},
 "password":"123456",
 "hobby":["篮球","足球"]
 "isStudent":true
}

前端js解析json格式字符串代码

    <script type="text/javascript">
    	function createXMLHttpRequest() {
    		try {
    			//大多数浏览器通过该方法来获取
    			return new XMLHttpRequest();
    		} catch (e) {
    			try {
    				//IE6
    				return new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e) {
    				try {
    					//IE5以下版本
    					return new ActiveXObject("Microsoft.XMLHTTP");
    				} catch (e) {
    					alert("浏览器不支持");
    				}
    			}
    		}
    	}
    	function send(){
    		var xhr=createXMLHttpRequest();
    		//建立连接
    		xhr.open("GET", "/Servlet/ajax/ajax3", true);
    		//发送数据
    		xhr.send(null);
    		//通过XMLHttpRequest对象的状态监听器接收响应
    		xhr.onreadystatechange=function(){
    			//判断是否接受到响应
    			if(xhr.readyState==4&&xhr.status==200){
    				//获取响应体中的json格式文本内容
    				var text=xhr.responseText;
    				//解析json格式字符数据,使用eval()进行解析成一个json对象
    				var user=eval("("+text+")");
    				var h=document.getElementById("h");
    				h.innerHTML=user.name+":"+user.age;
    			}
    		};
    	}
    </script>

后端可以使用工具类JavaBean对象转换成为一个json格式字符串，不需要手动拼接

import org.junit.Test;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import servlet.JSP.User;
public class JavaBeanToJson {
	@Test
	public void javaBeanToJson(){
		
		//JsonArray相当于java中的Map
		JSONObject obj=new JSONObject();
		obj.put("name", "vn");
		obj.put("age", 20);
		String json=obj.toString();
		System.out.println(json);
		
		//将JavaBean对象转换为json数据
		User user=new User();
		user.setName("vn");
		user.setPassword("123456");
		obj=JSONObject.fromObject(user);
		System.out.println(obj.toString());
		
		//JsonArray相当于java中的List
		JSONArray array=new JSONArray();
		array.add(user);
		System.out.println(array.toString());
	}
}

    5. 在一些js框架中，对ajax技术进行了封装，比如在jQuery中，可以通过以下方式来进行ajax异步交互

		$.ajax({url:"/cloud_note/user/login.do",//填写请求路径
				type:"post",//填写请求方式
				data:{"name":name,"password":password},//请求参数，即要发送的请求数据
				dataType:"json",//发送的请求数据的类型
                //如果请求发送成功，并且接收到响应数据时，响应数据存储在方法参数result中，然后调用此函数
				success:function(result){
					if(result.status==0){
						$("#count_span").html(result.msg);
					}else if(result.status==1){
						$("#password_span").html(result.msg);
					}else{
						var userId=result.data.cn_user_id;
						addCookie("userId",userId,2);
						window.location.href="edit.html";
					}
				},
                //请求发送失败，调用此函数
				error:function(){
					alert("登录失败");
				}
		});

 

转载于:https://my.oschina.net/ProgramerLife/blog/2055988

weixin_34413357
关注
Ajax 技术应用
abu1216的博客
12-02 404
1.Ajax 简介 1.1Ajax 是什么？ Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。 传统Web应用中简易的同步模型分析，如图-1所示： 基于Ajax技术的异步请求响应模型分析，如图-2所示： 1.2Ajax 技术应用场景？ Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体.
ajax技术的应用及总结
THE GUY的个人专栏
11-03 2367
Ajax（Asynchronous JavaScript and XML）是一个结合了Java技术、XML、以及JavaScript的web开发模式，可以让你构建基于Java技术的Web应用，解决了web开发中经常碰到的页面重载问题（即不需要页面刷新便可轻易实现服务器端数据的获取）       本例中的应用是基于java的Servlet技术(也可以很容易的扩展到bean中实现)，共需要创建三个
Ajax技术的应用入门
Daniel
07-16 594
Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术，借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。
Web中的Ajax技术应用研究.pdf
最新发布
01-03
【Ajax技术概述】 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax的核心是利用JavaScript与服务器进行异步通信，结合XML或其他数据格式来实现局部...
ajax 技术基本应用
06-15
**Ajax技术基本应用** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心是利用JavaScript与服务器进行异步数据交换，通过XML或者JSON等格式传输数据，...
第08章 Struts 2.1标签库详解与AJAX技术应用
12-28
二、AJAX技术应用 1. AHAH（Asynchronous HTML and HTTP）：Struts 2可以通过简单的JavaScript库实现页面的部分刷新，即只更新页面的一部分，而不是整个页面。例如，使用`s:a`标签配合AJAX可以实现无刷新链接。 2....
第3章 Struts2标签库详解与AJAX技术应用大型门户网站是这样炼成的
03-15
大型门户网站是这样炼成的，本书详细介绍了以JSP 2、Struts 2、Spring 2.5、Hibernate 3.2、AJAX等主流JavaEE技术进行优化组合开发高性能大型门户网站的实践经验。针对读者的不同学习阶段，共分技术篇、实践篇与部署...
Struts 2.1标签库详解与AJAX技术应用
11-01
Struts 2.1标签库详解与AJAX技术应用Struts 2.1标签库详解与AJAX技术应用Struts 2.1标签库详解与AJAX技术应用Struts 2.1标签库详解与AJAX技术应用Struts 2.1标签库详解与AJAX技术应用Struts 2.1标签库详解与AJAX技术...
ajax技术的运用
ioriyagami_nty的博客
07-02 243
此项目的关键点在于使用ajax实现请求服务器信息 具体代码如下 JavaScript"> var num=2; window.onload = function(){       //当进入窗口是自动执行此方法       sayHi();// 执行 sayHi（）方法，先加载第一次   } function focusbody()
Ajax技术概述与现状应用（转载）
theice
10-25 486
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。Ajax并没有创造出某种具体的新技术，它所使用的所有技术 都是在很多年前就已经存在了，然而Ajax以一种崭新的方式来使用所有的这些技术，使得古老的B/S方式...
ajax技术应用的举例
weixin_40843624的博客
11-19 201
ajax无刷新的上传的技术
Ajax及其应用
qq_53826231的博客
03-20 88
返回值：得到一个包含send()方法的对象。用于指定HTTP请求方法，支持所有HTTP的方法，如GET,POST，head。在调用oepn()方法准备好一个请求后，还需要把该请求发送到服务器，这时就需要调用send()方法。send()方法中包含了一个可选的参数，该参数可以包含可变类型的数据。请求的资源就是URL的地址，请求的方式有GET,HEAD,POST,浏览器向服务器发送的内容称之为请求，客户端给浏览器返回的结果称之为相应。该方法用来设置请求的头部信息，该方法的调用必须在调用open()方法之后。
AJAX应用（一）
weixin_33788244的博客
01-17 68
AJAX已经发展很久了，但自己还没有应用过，今天拿出一点时间，做了一个简单的DEMO，适合与我一样刚刚接触AJAX的朋友 至于什么是AJAX（Asynchronous JavaScript and XML）,网上介绍的很多，这里就不再说了。总之它是多种技术的综合。包括 Javascript,XHTML,CSS,DOM,XML,XSTL,XMLHttpRequest. 看了这么多技术，是不是很头...
Ajax技术使用(一)
weixin_33796205的博客
02-28 95
Ajax技术使用 目录 AJAX介绍 XMLHttpRequest 请求和响应 onreadystatechange 事件 AJAX介绍 什么是 AJAX AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。 这意味着可以在不重...
常考的Ajax面试题
热门推荐
hyunbar的博客
11-10 1万+
1、什么是AJAX，为什么要使用Ajax（请谈一下你对Ajax的认识）什么是ajax：AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。Ajax包含下列技术：基于web标准（standards-basedpresentation）XHTML+CSS的表示； 使用 DOM（Document ObjectModel）进行动态显
将AJAX技术应用于BEAWebLogicPortal
"实现AJAX风格的Portal" ...将AJAX技术应用于BEA WebLogic Portal，不仅可以提升用户交互的流畅性和效率，还可以降低服务器负担，改善整体的系统性能。这对于构建高效、用户友好的企业级门户至关重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值