ajax笔记（一）---异步数据传输

（一）ajax的运行原理

页面发起数据请求，浏览器会将请求发送给ajax引擎，让ajax引擎去向服务器请求数据，当服务器响应后将数据返回给ajax引擎，然后ajax引擎会触发响应的函数，在服务器响应请求返回数据的过程中，客户端可以执行任何操作，而不用等待，ajax相当于一个秘书，代替你去办你想办的事情，在此期间，你可以做自己的事情。

（二）同步和异步

（1）同步：客户端向服务器端请求数据，在服务器端响应返回数据之前，客户端处于等待卡死状态，不可进行其他操作，

前面学习的同步锁也有类似，有一种串行的意思。

（2）异步：客户端向服务器端发送请求，在服务器端响应返回数据之前，客户端可以进行其他的操作，可以随意做其他的事情而不会被卡死。

（三）Demo

（1）ajax.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	
	function fn1(){
		//所有操作都由ajax引擎来完成
		//创建ajax引擎对象---所有操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//绑定监听，监听服务器是否已经返回数据,
		xmlHttp.onreadystatechange = function(){
			//接收数据
			//引擎的状态有很多种，需要判断
			/*
			onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化
			存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

			0: 请求未初始化 
			1: 服务器连接已建立 
			2: 请求已接收 
			3: 请求处理中 
			4: 请求已完成，且响应已就绪 
           若不进行判断，alert(res)语句会多次打印空值
          当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
			*/
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				var res = xmlHttp.responseText;
				alert(res);
			}
		}
		
		//绑定地址
		xmlHttp.open("GET","/AjaxDemo/ajaxServlet",true);
		//参数一：请求方式，参数二：绑定地址，参数三：是否异步
		//发送请求
		xmlHttp.send();
		//接受响应数据
		
	}
</script>
</head>
<body>
	<input type="button" value="异步访问" onclick = "fn1()">
</body>
</html>

（2）web.xml配置文件，可以在创建Servlet时进行路径映射书写，就不用后续的手动书写配置
<?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>AjaxDemo</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>AjaxServlet</display-name>
    <servlet-name>AjaxServlet</servlet-name>
    <servlet-class>com.shu.hj.AjaxServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AjaxServlet</servlet-name>
    <url-pattern>/ajaxServlet</url-pattern>
  </servlet-mapping>
</web-app>

（3）AjaxServlet
package com.shu.hj;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AjaxServlet
 */
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//response.getWriter().append("Served at: ").append(request.getContextPath());
		//ajax引擎访问我，我就将数据返回给ajax,书写一个简单的打印语句
		response.getWriter().write("hong jie");
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		doGet(request, response);
	}

}

（4）结果

（1）若不进行响应状态的判断，浏览器会打印3次空值，再打印两次语句

（2）若进行ajax引擎状态的判断，在输出时就不会打印空值

一个小demo 完成。

ajax笔记（一）---异步数据传输

猜你喜欢