Ajax和Json（二）——Ajax核心知识

原创

qq5ec1c881b4a21 2021-07-15 11:36:39 ©著作权

文章标签 ● 富客户端技术 XMLHttpRequest对象 Ajax核心知识请求服务器 Ajax和Json 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者qq5ec1c881b4a21的原创作品，请联系作者获取转载授权，否则将追究法律责任

目录

1. XMLHttpRequest对象的创建；

2. XMLHttpRequest对象请求后台；

3. XMLHttpRequest对象响应服务器；

4. 完整代码；

这一节我们来说一下ajax的核心知识；

1. XMLHttpRequest对象的创建；

所有现代浏览器均支持XMLHttpRequest对象，（IE5和IE6使用的是ActiveXObject）。

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新；

<script type="text/javascript">
	function loadName(){
		var xmlHttp;
		/* 如果有XMLHttpRequest对象，直接创建 */
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			/* 如果没有，则利用ActiveXObject对象 */
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
</script>

2. XMLHttpRequest对象请求后台；

这里要调用.open()和.send()方法

open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；get 或 post
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)
将请求发送到服务器。 string：仅用于 post 请求

Get还是Post?

Get：更简单更快，在大部分情况下都能使用；

使用Post的情况：

无法使用缓存文件（更新服务器上的文件或数据库）；

向服务器发送大量数据（Post没有数据量限制）；

发送包含未知字符的用户输入时，Post比Get更稳定也更可靠；

异步还是同步？

Ajax指的是异步JavaScript和XML（Asynchronous JavaScript and XML）。

True：异步，表示程序请求服务器的同时，程序可以继续执行；能提高系统的运行效率；

False：同步，JavaScript会等到服务器就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止；

一般都用异步（True）；

<script type="text/javascript">
	function loadName(){
		var xmlHttp;
		/* 如果有XMLHttpRequest对象，直接创建 */
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			/* 如果没有，则利用ActiveXObject对象 */
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		/* 调用open方法，利用get异步请求 */
		xmlHttp.open("get","getAjaxName",true);
		/* 调用send方法发送请求 */
		xmlHttp.send();
	}
</script>

3. XMLHttpRequest对象响应服务器；

当请求被发送到服务器时，我们需要执行一些基于响应的任务；

每当readyState改变时，就会触发onreadystatechange事件；

readyState属性存有XMLHttpRequest的状态信息；

XMLHttpRequset对象的三个重要的属性：

onreadystatechange：存储函数（或函数名），每当readyState属性改变时，就会调用该函数；

readyState：存有XMLHttpRequest的状态，从0到4发生变化；

0：请求未初始化；

1：服务器连接已建立；

2：请求已接受；

3：请求处理中；

4：请求已完成，且响应已就绪；

status：

200：表示成功，“OK”；

404：表示失败，“未找到页面”；

<script type="text/javascript">
	function loadName(){
		var xmlHttp;
		/* 如果有XMLHttpRequest对象，直接创建 */
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			/* 如果没有，则利用ActiveXObject对象 */
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		alert("readystate状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
		xmlHttp.onreadystatechange=function(){
			//alert("readystate状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
		}
		
		/* 调用open方法，利用get异步请求 */
		xmlHttp.open("get","getAjaxName",true);
		/* 调用send方法发送请求 */
		xmlHttp.send();
	}
</script>

当我们未改变readyState属性时，我们来看readyState的状态：

点击获取数据的按钮显示：

Ajax和Json（二）——Ajax核心知识_Ajax核心知识

当我们改变了readyState的属性时，我们再来看看readyState的状态（取消onreadystatechange里面的注释）：

Ajax和Json（二）——Ajax核心知识_Ajax核心知识_02

Ajax和Json（二）——Ajax核心知识_● 富客户端技术_03

Ajax和Json（二）——Ajax核心知识_● 富客户端技术_04 .

Ajax和Json（二）——Ajax核心知识_XMLHttpRequest对象_05

可以看到readystate的状态是一步步变化的，status也是成功的连接状态（200状态）；

在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务；

获得服务器响应：使用XMLHttpRequest对象的responseText或responseXML属性；

responseText：获得字符串形式的响应数据；

responseXML：获得XML形式的响应数据；

主要用responseText；

<script type="text/javascript">
	function loadName(){
		var xmlHttp;
		/* 如果有XMLHttpRequest对象，直接创建 */
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			/* 如果没有，则利用ActiveXObject对象 */
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		alert("readystate状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
		xmlHttp.onreadystatechange=function(){
			alert("readystate状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
			if(xmlHttp.readyState==4 && xmlHttp.status==200){
				alert(xmlHttp.responseText);
			}
		}
		
		/* 调用open方法，利用get异步请求 */
		xmlHttp.open("get","getAjaxName",true);
		/* 调用send方法发送请求 */
		xmlHttp.send();
	}
</script>

当我们发送要求到服务器时，后台接受数据的时候用responseText，

当前面的readyState的状态是0,1,2,3,4后，再次点击时就会获取到数据，如图所示：

Ajax和Json（二）——Ajax核心知识_XMLHttpRequest对象_06

4. 完整代码；

ajax.jsp：

<%@ 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>
<script type="text/javascript">
	function loadName(){
		var xmlHttp;
		/* 如果有XMLHttpRequest对象，直接创建 */
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			/* 如果没有，则利用ActiveXObject对象 */
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		alert("readystate状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
		xmlHttp.onreadystatechange=function(){
			alert("readystate状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
			if(xmlHttp.readyState==4 && xmlHttp.status==200){
				alert(xmlHttp.responseText);
				document.getElementById("name").value=xmlHttp.responseText;
			}
		}
		
		/* 调用open方法，利用get异步请求 */
		xmlHttp.open("get","getAjaxName",true);
		/* 调用send方法发送请求 */
		xmlHttp.send();
	}
</script>
</head>
<body>
<div style="text-align: center;">
	<div>
		<input type="button" value="Ajax获取数据" onclick="loadName()"/>&nbsp;&nbsp;<input type="text" id="name" name="name"/>
	</div>
</div>
</body>
</html>

GetAjaxNameServlet.java：

package com.java.web;

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 GetAjaxNameServlet extends HttpServlet{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		//获取getWriter()对象
		PrintWriter out=response.getWriter();
		out.print("ajax返回的文本");
		//刷新
		out.flush();
		out.close();
	}
	
	

	
}

web.xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>AjaxJson</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  
  <servlet>
  		<servlet-name>getAjaxNameServlet</servlet-name>
  		<servlet-class>com.java.web.GetAjaxNameServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  		<servlet-name>getAjaxNameServlet</servlet-name>
  		<url-pattern>/getAjaxName</url-pattern>
  </servlet-mapping>
</web-app>

获取数据的结果：

Ajax和Json（二）——Ajax核心知识_请求服务器_07