第一节Ajax详解——低调也可以很奢华
博客专区 > v若水 的博客 > 博客详情
第一节Ajax详解——低调也可以很奢华
v若水 发表于2年前
第一节Ajax详解——低调也可以很奢华
  • 发表于 2年前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 一堂Ajax的公开课

什么是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>

 

 

 

 

 

 

 

 

 

 

 

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 4
码字总数 13844
×
v若水
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: