天天看点
返回

JavaWeb开发专题(十六)-Ajax技术

1.AJAX是什么

JavaWeb开发专题(十六)-Ajax技术

传统方式与服务器交互的"弊端"：如果要刷新网页中的一部分，必须整个网页重新加载！

Ajax：局部刷新技术：通过js的方式请求后台，获取数据，然后使用DOM技术根据后台获取的数据更新页面元素，在获取数据的过程中，浏览器不刷新。

2.AJAX快速入门（验证用户名）

163邮箱的注册页面：输入框离焦，发送ajax请求做后台查询，然后使用DOM技术弹出一个提示信息

JavaWeb开发专题(十六)-Ajax技术

ajax的典型应用：注册的时候，在没有提交表单的情况下，验证用户名是否存在

编写步骤：

JavaWeb开发专题(十六)-Ajax技术

1.创建ajax的核心对象，ajax是以这个对象展开的

2.监听服务器的返回状态，当readyState（服务器对请求处理的步骤）和status（响应的状态码）

3.发送请求

4.获取响应

2.1.功能分析

步骤：

1.当输入用户名之后，输入框失去焦点，发送ajax请求，获取结果

2.根据结果使用DOM技术更新页面节点

2.2.前端js代码 

<%@ page contentType="text/html; charset=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 checkName(username) {
    // 1、创建ajax的核心对象XMLHttpRequest
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 2、监听服务器的返回状态
    xmlhttp.onreadystatechange = function() {
      // readyState=4:服务器完成对请求的处理  status=200：响应状态码,成功
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // 4、获取来自服务器的响应结果
        var result = xmlhttp.responseText;
        if ( result == 1 ) {
          document.getElementById("result").innerHTML = "已存在X";
          document.getElementById("result").style.color = "red";
        } else {
          document.getElementById("result").innerHTML = "可用√";
          document.getElementById("result").style.color = "green";
        }
      }
    }
    
    // 3、发送请求
    var url = "${pageContext.request.contextPath}/checkName?username=" + username;
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
  }
</script>
</head>
<body>
  <input id="username" onblur="checkName(value);" />
  <span id="result">结果</span>
</body>
</html>

2.3.后端Servlet代码 

package web;

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

@SuppressWarnings("all")
@WebServlet("/checkName")
public class CheckName extends HttpServlet {
  public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
    // 获取用户名
    String username = request.getParameter("username");
    if ( "zhangsan".equals(username) ) {
      response.getWriter().write("1");
    } else {
      response.getWriter().write("0");
}
  }

  public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
    doGet(request, response);
  }
}

3.Ajax详解

3.1.Ajax工作原理

JavaWeb开发专题(十六)-Ajax技术

ajax无刷新技术，得益于浏览器内置的核心对象XMLHttpRequest对象

1.创建核心对象（需要兼容处理）

2.调用核心对象的方法发送请求

3.通过核心对象的responseText属性获取来自服务器的结果

4.根据结果做相应的处理

3.2.AJAX的核心对象XMLHttpRequest

获取核心对象，不同的浏览器，获取的方式不同，因此获取该对象，需要判断浏览器的类型，然后使用相应的方式去获取，一般是将兼容代码抽成一个函数，以后直接调用函数获取该对象

每次发送ajax请求的时候，都需要创建一个全新的XMLHttpRequest对象

抽取单独的js文件：xhr.js

function getXHR() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
}

在需要使用ajax的页面中，引入该js文件，在获取该对象的时候，直接调用getXHR()方法去获取

JavaWeb开发专题(十六)-Ajax技术

3.3.AJAX的监听函数onreadystatechange

不要手动写！

JavaWeb开发专题(十六)-Ajax技术

因此，必须等核心对象的readyState属性为4并且status属性的值为200的时候，才能获取到来自服务器响应的结果，因此获取结果的代码，通常写成如下形式：

JavaWeb开发专题(十六)-Ajax技术
监听服务器的返回状态
xmlhttp.onreadystatechange = function() {
  // readyState=4:服务器完成对请求的处理  status=200：响应状态码,成功
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    //获取来自服务器的响应结果
    var result = xmlhttp.responseText;
    // do something...
  }
}

3.4.发送AJAX请求

JavaWeb开发专题(十六)-Ajax技术
发送请求必须先调用open方法对象请求进行设置，然后再调用send方法才会发送请求！

3.5.获取AJAX响应

JavaWeb开发专题(十六)-Ajax技术

获取服务器的响应有2个属性：

responseText：获取文本

responseXML：获取服务器响应的xml格式的数据，后台需要使用DOM4j将java对象转换成xml格式的字符串，然后前端js还需要使用DOM技术去解析xml数据，和使用DOM操作HTML元素类似，相对来说比较麻烦，现在已经淘汰！

4.GET还是POST?

4.1.get和post的使用场景

get请求一般用于查询(列表)数据，而post请求用于提交数据（增、删、改）

ajax中具体使用哪种请求方式，和传统方式一致！

4.2.GET请求和POST请求的区别

1.get请求的参数在地址栏中，因此相对post不安全，而post请求的参数在请求体中，相对get较安全

2.get请求发送的数据量有大小限制，而post理论上没有大小限制。

3.get请求支持缓存，而post不支持缓存。（最重要的区别！）

当浏览器发送一个get请求时，会将请求的资源加载本地的缓存中（硬盘中的某个位置），当再次请求该资源的时候，浏览器会优先从本地缓存中获取数据，如果缓存中没有数据，则请求服务器！这样可以减轻服务器的压力！而发送一个post请求时，浏览器根本就不会将请求的资源缓存到本地来，这是浏览器给我们提供一种机制！

缓存是根据请求地址做判断的，因此，如果请求的资源不希望从本地缓存中获取，可以在请求的地址栏的后面追加随机数，以保证每次请求的地址不一样，浏览器从本地就找不到缓存数据，因此每次都会将请求发送给服务器！

缓存：

前端缓存：css、js、图片等静态资源

后台缓存：从数据库中查询的数据缓存

当发送get请求时，如果不希望服务器返回缓存的数据，可以在地址栏后随机拼接参数，因此走不走缓存，浏览器和服务器是根据请求的地址是否一致来进行判断的！

JavaWeb开发专题(十六)-Ajax技术

post请求需要在请求头中添加Content-Type：

JavaWeb开发专题(十六)-Ajax技术

4.同步还是异步?

同步请求和异步请求的区别：

同步：单线程

请求发出之后，在服务器没有返回结果之前，客户端处理等待状态，必须等服务器响应结果之后，才能进行后续的操作。在服务器处理请求的这个过程中，客户端的js代码是出于阻塞状态。

异步：多线程

请求由另外一个线程来完成，完成之后处理响应的结果即可，客户端可以进行其他的操作，js代码也不会产生阻塞。

ajax异步请求：open(“get”, “xx”, true)

ajax同步请求：open(“get”, “xx”, false)

xml ajax 服务器
上一篇: 了解Ajax
下一篇: Django之Ajax

继续阅读