加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-16 01:34:01 所属栏目：百科 来源：网络整理
导读：什么是Ajax？ ?Asynchronous JavaScript and XML ?浏览器与服务器之间进行异步交互无需刷新页面的技术。 Ajax典型应用：Google Suggest Ajax的发展历程 Ajax牛在哪？ Ajax为什么这么牛？ Ajax不是一个人在战斗 XMLHttpRequest对象 知识脉络一：Ajax原理 %@ p

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同