文档章节

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

v若水
 v若水
发布于 2016/06/14 22:57
字数 1210
阅读 13
收藏 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
海淀
高级程序员
还在纠结iphone7的两种配色吗?一张图让你瞬间区分

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

科技小冉
2016/09/22
0
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
C语言自学完备手册(25)——字符串(2)

版权声明: https://blog.csdn.net/lfdfhl/article/details/83060328 自定义View系列教程00–推翻自己和过往,重学自定义View 自定义View系列教程01–常用工具介绍 自定义View系列教程02–o...

谷哥的小弟
10/15
0
0
第一行代码 Android 第二版到货啦

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

自然麻雀
2016/12/05
91
0

没有更多内容

加载失败,请刷新页面

加载更多

Python深体验,常见的数据处理方式(必须要懂的)

1.缺失值处理 - 拉格朗日插值法 input_file数据文件内容(存在部分缺失值): from scipy.interpolate import lagrangeimport pandas as pdimport numpy as npinput_file = './dat...

无也Python
27分钟前
2
0
Spring MVC注解故障追踪记

Spring MVC是美团点评很多团队使用的Web框架。在基于Spring MVC的项目里,注解的使用几乎遍布在项目中的各个模块,有Java提供的注解,如:@Override、@Deprecated等;也有Spring提供的注解,...

Skqing
28分钟前
4
0
区块链入门教程以太坊源码分析cmd包分析

  兄弟连区块链入门教程以太坊源码分析cmd包分析。 ### cmd包概述 * geth 主要Ethereum CLI客户端。它是Ethereum网络(eth主网,测试网络或私有网)的入口点,使用此命令可以使节点作为ful...

兄弟连区块链入门教程
30分钟前
1
0
@Autowired 报红线

代码可正常跑,不过红线看着有点难受,解决方案 使用@Autowired(required=false) 或者@Resource. 这两者区别网上一大堆

斩神魂
35分钟前
3
0
DataTable中检索信息 (C#)

C#_从DataTable中检索信息 存在于内存中的虚拟表DataTable,绑定在数据显示控件后,如果想在再检索其中某些信息,可以利用DataTable.Select方法进行检索,避免了重复的读取数据库。Select方法...

CS-CS01
43分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部