文档章节

第一节Ajax详解——低调也可以很奢华

v若水
 v若水
发布于 2016/06/14 22:57
字数 1210
阅读 12
收藏 0

什么是Ajax?

        •Asynchronous JavaScript and XML

        •浏览器与服务器之间进行异步交互无需刷新页面的技术。

Ajax典型应用:Google Suggest

Ajax的发展历程

Ajax牛在哪?

 

Ajax为什么这么牛?

 

Ajax不是一个人在战斗

XMLHttpRequest对象

知识脉络一:Ajax原理

 

<%@ 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>Insert title here</title>
<style type="text/css">button {width: 200px;}</style>
<script type="text/javascript">
	function getRequest() {
	    var xmlHttp = null;
	    try {// Chrome, Firefox, Opera, Safari
	        xmlHttp = new XMLHttpRequest();
	    } catch (e) {
	        try {// Internet Explorer
	            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
	        } catch (e) {
	            try {// Internet Explorer
	                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	            } catch (e) {
	                alert("your browser not support ajax!");
	            }
	        }
	    }
	    return xmlHttp;
	}
	var request = getRequest();
	
	window.onload = function(){//页面加载完成之后我们才获取按钮的对象
		var btn01Ele = document.getElementById("btn01");
		btn01Ele.onclick = function(){
			alert(request);
		};
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			//发送GET请求
			//1.调用request对象的open()方法建立一个连接
			//①method参数:请求方式
			//②url参数:请求的目标地址
			//发送请求参数:附着在URL地址后面
			request.open("get", "AjaxRequestServlet?userName=Tom2015");
			//2.调用request对象的send()方法发送请求数据
			request.send();
		};
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			//发送POST请求
			//发送请求参数:将请求参数键值对以参数形式传递给send()方法
			request.open("post", "AjaxRequestServlet");
			//设置请求消息头为如下的值:
			//Content-Type:application/x-www-form-urlencoded
			request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			request.send("userName=Jerry2015&userPwd=123456");
		};
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//接收【文本】格式的响应数据
			request.open("post", "AjaxResponseText");
			request.send();
			//1.通过onreadystatechange事件监听readystate属性值的变化
			request.onreadystatechange = function(){
				//2.在readystat属性等于4并且status属性等于200时接收响应数据
				if(request.readyState == 4 && request.status == 200) {
					var result = request.responseText;
					alert(result);
				}
			};
		};
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			//接收【XML】格式的响应数据
			request.open("post", "AjaxResponseXML");
			request.send();
			//1.通过onreadystatechange事件监听readystate属性值的变化
			request.onreadystatechange = function(){
				//2.在readystat属性等于4并且status属性等于200时接收响应数据
				if(request.readyState == 4 && request.status == 200) {
					//"<user><userName>Tom2015</userName></user>"
					//{user:{userName:Tom2015}}
					//使用responseXML属性接收XML格式的数据
					var result = request.responseXML;
					//alert(result + " " + document);
					var userName = result.getElementsByTagName("userName")[0].firstChild.nodeValue;
					alert(userName);
				}
			};
		};
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			//接收【JSON】格式的响应数据
			request.open("post", "AjaxResponseJSON");
			request.send();
			//1.通过onreadystatechange事件监听readystate属性值的变化
			request.onreadystatechange = function(){
				//2.在readystat属性等于4并且status属性等于200时接收响应数据
				if(request.readyState == 4 && request.status == 200) {
					var result = request.responseText;
					//直接接收到的JSON数据是一个字符串类型,需要转换为JSON对象格式
					result = eval("("+result+")");
					//alert(typeof result);
					//"[\"Hello\",{userName:'Tom2015'}]"
					alert(result[1].userName);
				}
			};
		};
	};
</script>
</head>
<body>
	<center>
		<button id="btn01">获取XMLHttpRequest对象</button><br />
		<button id="btn02">发送GET请求</button><br />
		<button id="btn03">发送POST请求</button><br />
		<button id="btn04">接收【文本】格式的响应数据</button><br />
		<button id="btn05">接收【XML】格式的响应数据</button><br />
		<button id="btn06">接收【JSON】格式的响应数据</button><br />
		<br /><br />
		<form action="AjaxRequestServlet" method="post">
			<input type="text" name="userName" /><input type="submit" />
		</form>
	</center>
</body>
</html>

接收响应的时机


import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxRequestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取浏览器端传入的请求参数
		String userName = request.getParameter("userName");
		System.out.println("userName="+userName);
		System.out.println("AjaxRequestServlet get...");
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String userName = request.getParameter("userName");
		System.out.println("userName="+userName);
		System.out.println("AjaxRequestServlet post...");
	}
}

关于Ajax请求返回一个文本类型的数据


import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxResponseText extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//准备作为响应的文本数据
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter writer = response.getWriter();
		writer.write("英明神武,风流倜傥!");
	}
}

关于Ajax请求返回一个XML类型的数据


import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxResponseXML extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//准备XML数据,作为响应返回给浏览器
		String xmlStr = "<user><userName>Tom2015</userName></user>";
		//告诉浏览器,服务器端返回的数据是XML格式的
		response.setContentType("text/xml;charset=UTF-8");
		PrintWriter writer = response.getWriter();
		writer.write(xmlStr);
	}
}

关于Ajax请求返回一个JSON类型的数据


import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxResponseJSON extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//准备JSON字符串
		String jsonStr = "[\"Hello\",{userName:'Tom2015'}]";
		response.setContentType("text/json;charset=UTF-8");
		PrintWriter writer = response.getWriter();
		writer.write(jsonStr);
	}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/*
	1.最外层只能是[]或{}
	2.[]表示JSON数组:[value_1,value_2,...,value_n]
	3.{}表示JSON对象:{key_1:value_1,key_2:value_2,...,key_n:value_n}
	4.key数据类型:字符串
	5.value数据类型:
		基本数据类型:数值,字符串,布尔
		引用数据类型:数组和对象
	6.优势:
		①数据量小
		②解析速度快
		③是JavaScript中直接支持的数据格式,解析方便
	*/
	var json = ["Hello",{userName:'Tom2015'}];
	alert(json[0]+" "+json[1].userName);
</script>
</head>
<body>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
v若水
粉丝 3
博文 7
码字总数 13844
作品 0
海淀
高级程序员
Excel 函数详解 | CELL 函数:单元格信息无所不知

Excel 中单元格是最核心也是最小的数据单元,几乎所有的数据都存储在单元格中。关于单元格,你知道哪些东西?你又能准确表达你知道的信息吗?别担心,Excel 已经为你准备好了你要的函数——C...

懒人Excel
05/25
0
0
Sprig MVC AJAX提交数据整理

标签: 在使用SpringMVC+AJAX提交数据的时候一直提交不成功,发现自己对于SpringMVC AJAX提交数据的认知完全是错误的,重新学习整理。 什么是JSON对象/字符串 JSON对象: 这种格式的叫JSON对象...

化烟雨
2017/11/28
0
0
还在纠结iphone7的两种配色吗?一张图让你瞬间区分

  磨砂黑,和亮黑….      亮黑色尊贵大气!      磨砂黑低调奢华!      两种颜色各有各的优点,感觉32G够用的话就买磨砂黑,游戏发烧友的话建议亮黑色试试手感。不过小编个人...

科技小冉
2016/09/22
0
0
第一行代码 Android 第二版到货啦

今日android第一行代码【第二版】已到,收获的季节到了 先看一下封面 书签: 以后就把空闲时间送给它吧 先来看一下本书的目录: 第1章 开始启程——你的第1行Android代码 第2章 先从看得到的...

自然麻雀
2016/12/05
91
0
惊呆!有了这些设备,程序员秒变黄金圣斗士!

你拥有的任何一件普通物品,都有专为土豪们打造的奢华版本。比如,超炫的镀金笔记本电脑,可以暖屁股的高价马桶,能喷出香气的可程序化喷头……下面我们就来一起看看各种日常物品中的土豪版本...

csdnsevenn
2017/12/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

arts-week5

Algorithm 824. Goat Latin - LeetCode 152. Maximum Product Subarray - LeetCode 110. Balanced Binary Tree - LeetCode 67. Two Sum II - Input array is sorted - LeetCode 665. Non-dec......

yysue
14分钟前
0
0
iOS开发之AddressBook框架详解

iOS开发之AddressBook框架详解 一、写在前面 首先,AddressBook框架是一个已经过时的框架,iOS9之后官方提供了Contacts框架来进行用户通讯录相关操作。尽管如此,AddressBook框架依然是一个非...

珲少
44分钟前
1
0
两年摸爬滚打 Spring Boot,总结了这 16 条最佳实践

Spring Boot是最流行的用于开发微服务的Java框架。在本文中,我将与你分享自2016年以来我在专业开发中使用Spring Boot所采用的最佳实践。这些内容是基于我的个人经验和一些熟知的Spring Boot...

Java填坑之路
今天
3
0
《Spring5学习》04 - 面向切面编程

一、Spring面向切面编程的基本概念 面向切面编程(即AOP):把项目中需要再多处使用的功能比如日志、安全和事务等集中到一个类中处理,而不用在每个需要用到该功能的地方显式调用。 横切关注...

老韭菜
今天
2
0
day61-20180819-流利阅读笔记

跑道没了,它们还在跑:澳门赛狗业的遗孤 Daniel 2018-08-19 1.今日导读 相信你早就知道香港有个赛马会,可是你听说过香港的邻居澳门原本有个赛狗会吗?其实,对于澳门人来说,赛狗这项活动历...

aibinxiao
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部