Ajax学习笔记

Posted 2020-08-30 WWWYC

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax学习笔记相关的知识，希望对你有一定的参考价值。

时间：2016-12-21 11:20

——Ajax概述

1、什么是Ajax

Ajax（Asynchronous javascript And XML）翻译成中文就是“异步的JavaScript和XML”，即使用JavaScript语言和服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

Ajax还有一个最大的特点就是，当服务器响应时，不需要刷新整个浏览器界面，而是可以局部刷新，这一特点给用户的感觉是在不知不觉中完成请求和响应过程。

* 与服务器异步交互

* 浏览器页面局部刷新

* 服务器响应给客户端的一般一个完整的html页面，但在Ajax中因为是局部刷新，那么服务器就不用再响应页面，而是响应数据。

> 数据有如下三种：

text：纯文本

xml：大数据中使用

json：它是JS提供的数据交换格式，它在Ajax中最受欢迎。

2、异步交互和同步交互

同步：

发送一个请求，就要等待服务器的响应结束，然后才能发出第二个请求。

刷新的是整个页面。

异步：

发送一个请求后，无需等待服务器的响应，然后就可以发送第二个请求。

可以使用JS接受服务器的响应，然后使用JS完成局部刷新。

3、Ajax的优缺点：

优点：
* Ajax使用JavaScript技术向服务器发送异步请求。
* Ajax无需刷新整个页面
* 因为服务器相应内容不再是整个页面，而是刷新局部内容，所以Ajax性能高。

缺点：
* Ajax并不适合所有场景，很多时候还是需要使用同步请求进行交互。
* Ajax虽然提高了用户体验，但无形中向服务器发送请求的次数增多了，导致服务器压力增大。
* 因为Ajax是在浏览器中使用JavaScript完成的，所以还需要处理浏览器兼容性问题。

——Ajax第一例

1、准备工作
因为Ajax也需要请求服务器，异步请求也是请求服务器，所以我们需要先写好服务器端代码，即编写一个Servlet：

public class AServlet extends HttpServlet {

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

System.out.println("Hello Ajax");

response.getWriter().print("Hello Ajax");

}

    }

2、Ajax核心（XMLHttpRequest）
其实Ajax就是在JavaScript中多添加了一个对象：XMLHttpRequest对象，所有的异步交互都是使用XMLHttpRequest对象完成的，也就是说，只需要学习一个JavaScript的新对象即可。

注意：
        各个浏览器对XMLHttpRequest的支持是不同的，大多数浏览器都支持DOM2规范，都可以使用：var xmlHttp = new XMLHttpRequest()来创建对象。

       但IE有所不同，IE5.5以及更早版本需要：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");来创建对象。

      IE6.0需要使用：var xmlHttp = new ActiveXObect("Msxml2.XMLHTTP");来创建对象，而IE7以及以上版本也支持DOM2规范。

为了处理浏览器兼容性问题，可以使用以下方法来创建XMLHttpRequest对象：
        function createXMLHttpRequest(){

try {
// 适用于大多数浏览器，以及IE7及其更高版本

return new XMLHttpRequest();

} catch(e) {

try {
// 适用于IE6.0

return new ActiveXObject("Msxml2.XMLHTTP");

} catch(e) {

try {
// 适用于IE5.5及其以下版本

return new ActiveXObject("Microsofr.XMLHTTP");

} catch(e) {

alert("您的浏览器不支持Ajax");

throw e;

}

3、打开与服务器的连接
可以使用xmlHttp的open()方法来打开连接，open()方法的参数如下：
open(method, url, async)
      *   method：请求方式，通常为GET或POST
      *   url：请求的服务器资源地址，若为GET请求，还可以在URL后追加参数。
      *   async：这个参数是boolean类型，默认为true，表示异步请求，该参数可以省略。

4、发送请求
当使用open()方法打开连接后，就可以调用XMLHttpRequest对象的send()方法发送请求了。
send方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在URL后连接参数。

注意：
      若没有参数，需要给出null作为参数，若不给出null作为参数，可能会导致FIreFox浏览器不能正常发送请求。

5、接收服务器响应.

XMLHttpRequest对象有一个onreadystatechange事件，它会在XMLHttpRequest对象的状态发生变化时被调用：
    * 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法。
* 1：请求已开始，open()方法已经调用，但还没有调用send()方法。
* 2：请求发送完成状态，send()方法已被调用。
* 3：服务器已经开始响应，但不表示响应结束。
* 4：读取服务器响应结束。

onreadychange事件会在状态为1 2 3 4时引发，通常只关心状态4。

得到xmlHttp对象的状态：
* var state = xmlHttp.readyState
      > state的值可能是0 1 2 3 4

得到服务器响应的状态码：
* var status = xmlHttp.status;
      > status的值可能是200 404 500

得到服务器响应的内容：
* var content = xmlHttp.responseText
      > 得到服务器响应的文本格式的内容
      > 更加通用
* var content = xmlHttp.responseXML
      > 得到服务器响应的XML内容，即Document对象

示例代码：

ajax.jsp

<html>

<head>

<title>My JSP ‘ajax1.jsp‘ starting page</title>

// 创建异步对象

function createXMLHttpRequest() {

try {

return new XMLHttpRequest();

} catch (e) {

try {

return new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

return new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

alert("您的浏览器不支持Ajax");

throw e;

}

// 文档加载完毕后执行

window.onload = function() {

// 获取按钮

var btn = document.getElementById("btn");

// 给按钮的点击事件注册监听

btn.onclick = function() {

* 四步操作：

* 1、得到异步对象

* 2、打开与服务器的连接

* 3、发送请求

* 4、给异步对象的onreadystatechange事件注册监听器

var xmlHttp = createXMLHttpRequest();

xmlHttp.open("GET", "<c:url value=‘/AServlet‘ />", true);

// GET请求没有请求体，但也要给出null，否则FireFox可能不兼容

xmlHttp.send(null);

// 当xmlHttp的状态发生变化时执行

xmlHttp.onreadystatechange = function() {

// 双重判断，判断服务器响应结束和响应成功

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { // readyState 一定要大写

var h1 = document.getElementById("h1");

h1.innerHTML = xmlHttp.responseText;

}

};

</script>

</head>

<body>

</body>

</html>

——Ajax第一例小结

1、创建XMLHttpRequest对象
2、调用open()方法打开与服务器的连接
3、调用send()方法发送请求
4、为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在XMLHttpRequest的1 2 3 4四种状态时被调用。
5、XMLHttpRequest对象的5种状态
* 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法
* 1：请求已开始，open()方法已调用，但是还未调用send()方法
* 2：请求发送完成状态，send()方法已调用
* 3：开始读取服务器响应
* 4：读取服务器响应结束。
通常只关心第4种状态。

XMLHttpRequest对象的status属性表示服务器状态码，它只有在readyState为4时才能获取到。
XMLHttpRequest对象的responseText属性表示服务器响应内容，它只有在readyState为4时能获取到。

——第二例：发送POST请求

如果发送请求时需要带有参数，一般都用POST请求。

POST请求必须设置请求头：Content-Type: application/x-www-form-urlencoded。
表单的enctype默认值就是application/x-www-form-encoded，因为这是默认值，所以容易忽略这个值。
当设置了<form>的enctype="application/x-www-form-encoded"时，等同于设置了Content-Type请求头。

但在使用Ajax发送请求时，就没有默认值了，所以需要手动设置请求头：
      xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

当没有设置Content-Type请求头为application/x-www-form-urlencoded时，Web容器会忽略请求体的内容，容易造成空指针异常，所以在使用Ajax发送POST请求时，需要设置这一请求头，然后使用send()方法来设置请求体内容。

    POST请求的三个步骤：
      * open方法
          > xmlHttp.open("POST", URL, async);
      * 添加Content-Type请求头
          > xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      * send方法
          > xmlHttp.send("username=zhangSan&password=123456");   //发送请求时指定请求体

代码：

<html>
<head>

function createXMLHttpRequest() {

return new XMLHttpRequest();

}

window.onload = function() {

var btn = document.getElementById("btn");

btn.onclick = function() {

var xmlHttp = createXMLHttpRequest();

/**********************使用POST请求****************************/

xmlHttp.open("POST", "<c:url value=‘/AServlet‘/>", true);

/**********************设置请求头******************************/

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

/**********************发送请求时指定请求体，可以在后台用getParameter()获得参数*********************/

xmlHttp.send("username=zhangSan&password=123456");

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

var h1 = document.getElementById("h1");

h1.innerHTML = xmlHttp.responseText;

}

</script>

</head>

<body>

</body>

</html>

——第三例：注册表单之校验用户名是否注册

1、编写页面：
* regist.jsp
      > 给出注册表单页面
      > 给用户名文本框添加onblur事件的监听
      > 获取文本框的内容，通过Ajax四步发送给服务器，得到响应结果
          - 如果为1：在文本框后显示“用户名已被注册”
          - 如果为0：什么都不做

2、编写Servlet
* ValidateUsernameServlet
      > 获取客户端传递的用户名参数
      > 判断是否为wyc
          - 存在：返回1
          - 不存在：返回0

代码：

<html>
<head>

window.onload = function(){

// 获取文本框，给它的失去焦点事件注册监听

var userEle = document.getElementById("usernameID");

userEle.onblur = function(){

// 1、得到异步对象

var xmlHttp = createXMLHttpRequest();

// 2、打开链接

xmlHttp.open("POST", "<c:url value=‘/ValidateUsernameServlet‘ />", true);

// 3、设置请求头

xmlHttp.setRequestHeader("Content-Type", "applicatio n/x-www-form-urlencoded");

// 4、发送请求，给出请求体

xmlHttp.send("username=" + userEle.value);

// 5、给xmlHttp的onreadystatechange事件注册监听

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

// 获取服务器的响应，判断是否为1

// > 1：获取span，添加内容“用户名已被注册”

var text = xmlHttp.responseText;

// 得到span元素

var span = document.getElementById("errorSpan");

if(text == "1"){

span.innerHTML = "<font color=‘red‘>用户名已被注册</font>";

} else {

span.innerHTML = "";

}

};

function createXMLHttpRequest(){

return new XMLHttpRequest();

};

</script>

</head>

<body>

<h1>用户名是否被注册</h1>

用户名：<input type="text" name="username" id="usernameID"/><span id="errorSpan"></span><br/>

</form>

</body>

</html>

——第四例：响应内容为XML

当服务器向客户端响应XML时，要将文本转换成XML的Document对象，然后通过解析DOM来操作。

服务端设置：
> 设置响应头：Content-Type，其值为：text/xml;charset=utf-8
客户端：
> var doc = xmlHttp.responseXML; // 得到的是Document对象

代码：

<html>
<head>

// 创建异步对象

function createXMLHttpRequest() {

try {

return new XMLHttpRequest();

} catch (e) {

try {

return new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

return new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

alert("您的浏览器不支持Ajax");

throw e;

}

// 文档加载完毕后执行

window.onload = function() {

// 获取按钮

var btn = document.getElementById("btn");

// 给按钮的点击事件注册监听

btn.onclick = function() {

* 四步操作：

* 1、得到异步对象

* 2、打开与服务器的连接

* 3、发送请求

* 4、给异步对象的onreadychangestatechange事件注册监听器

var xmlHttp = createXMLHttpRequest();

xmlHttp.open("GET", "<c:url value=‘/Bservlet‘ />", true);

// GET请求没有请求体，但也要给出null，否则FireFox可能不兼容

xmlHttp.send(null);

// 当xmlHttp的状态发生变化时执行

xmlHttp.onreadystatechange = function() {

// 双重判断，判断服务器响应结束和响应成功

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

/*************************************************************************************************/

// 获取服务器的响应结果（XML）

var doc = xmlHttp.responseXML;

// 获取文档下名为student的所有元素，得到数组，再获取第一个元素

var ele = doc.getElementsByTagName("student")[0];

// 获取number属性值

var number = ele.getAttribute("number");

// 获取student下的子元素

// 处理浏览器差异问题

var name;

var age;

var gender

if(window.addEventListener){

name = ele.getElementsByTagName("name")[0].textContent; // textContent，大多数浏览器支持

age = ele.getElementsByTagName("age")[0].textContent; // textContent，大多数浏览器支持

gender = ele.getElementsByTagName("gender")[0].textContent; // textContent，大多数浏览器支持

} else {

name = ele.getElementsByTagName("name")[0].text; // text，IE支持

age = ele.getElementsByTagName("age")[0].text; // text，IE支持

gender = ele.getElementsByTagName("gender")[0].text; // text，IE支持

}

var text = number + ", " + name + ", " + age + ", " + gender;

document.getElementById("h1").innerHTML = text;

/*************************************************************************************************/

};

</script>

</head>

<body>

</body>

</html>

——第五例：省市联动

1、页面
<select name="province">
<option>==请选择省份===</option>
</select>

<select name="province">
<option>==请选择城市===</option>
</select>

2、ProvinceServlet
* 当页面加载完毕后马上请求这个Servlet
* 它需要加载china.xml文件，把所有的省的名称使用字符串发送给客户端。

3、页面
* 获取这个字符串，使用逗号分隔，得到数组。
* 循环便利每个字符串（省份的名称），使用每个字符串创建一个<option>元素，将元素添加到<select name="province">中。

4、CityServlet
* 当页面选择某个省时，发送请求。
* 得到省份的名称，加载china.xml文件，查询出该省份对应的元素对象，然后把这个元素转换成XML字符串，然后发送给客户端。

5、页面
* 把<select name="city">中的所有子元素删除，但不要删除<option>=== 请选择城市 ===</option>
* 得到服务器的响应结果：Document对象。
* 获取所有的<city>子元素，循环遍历，得到<city>的内容。
* 使用每个<city>的内容创建一个<option>元素，添加到<select name="city">中。

技术分享

china.xml

<?xml version="1.0" encoding="UTF-8"?>

<china>

</province>

</province>

</china>

----------------------------------------------------------------------------------------------------------------------------

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

String path = request.getContextPath();

String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My JSP ‘ajax7.jsp‘ starting page</title>

* 1、在文档加载完毕时发送请求，得到所有省份名称，显示在<select name="province">中

* 2、在选择了新的省份时，发送请求（参数为省份名），得到XML文档，即<province>元素

* 3、解析XML文档，得到七中的所有<city>，再得到每个<city>元素的内容，即市名，使用市名生成<option>元素，并插入到<select>元素中。

window.onload = function() {

function createXMLHttpRequest() {

return new XMLHttpRequest();

}

* 1、Ajax四步

* * 请求ProvinceServlet，得到所有省份名称

* * 使用每个省份名称创建一个<option>元素，添加到<select name="province">元素中

var xmlHttp = createXMLHttpRequest();

xmlHttp.open("GET", "<c:url value=‘/ProvinceServlet‘ />", true);

xmlHttp.send(null);

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

// 获取服务器响应

var text = xmlHttp.responseText;

// 使用逗号分隔，得到省份数组

var arr = text.split(",");

// 循环遍历每个省份名称，生成一个option对象，然后添加到<select>元素中

for (var i = 0; i < arr.length; i++) {

// 创建一个指定名称的元素

var op = document.createElement("option");

// 为元素设置实际值

op.value = arr[i]; // 设置op的实际值为当前省份名称

// 设置显示值

var textNode = document.createTextNode(arr[i]); // 创建文本节点

op.appendChild(textNode); // 把文本节点添加到op元素中，指定其显示值

document.getElementById("p").appendChild(op);

}

};

* 1、给<select name="province">添加改变事件监听器

* 2、使用选择的省份名称请求CityServlet，得到<Province>元素（XML）元素

* 3、获取<province>元素中所有的<city>元素，然后遍历获取每个<city>中的文本内容，即市名称

* 4、使用每个城市名称创建<option>元素，并添加到<select name="city">元素中

var proSelect = document.getElementById("p");

proSelect.onchange = function() {

var xmlHttp = createXMLHttpRequest();

xmlHttp.open("POST", "<c:url value=‘/CityServlet‘/>", true);

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xmlHttp.send("province=" + this.value);

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

* 1、把select中的所有option移除，除了“请选择”

var citySelect = document.getElementById("c");

// 获取所有子元素

var optionList = citySelect.getElementsByTagName("option");

// 循环遍历每个option元素，然后在citySelect中移除

while (optionList.length > 1) {

// 如果子元素的个数大于1就循环，等于1就不循环了，最终会留下“请选择”

citySelect.removeChild(optionList[1]); // 每次都移除第二个

}

// 得到响应的XML元素

var doc = xmlHttp.responseXML;

// 得到所有名为city的元素

var cityList = doc.getElementsByTagName("city");

for (var i = 0; i < cityList.length; i++) {

// 得到city元素

var city = cityList[i];

var cityName;

// 处理浏览器的差异

if (window.addEventListener) {

// 火狐等浏览器兼容

cityName = city.textContent;

} else {

// 支持IE

cityName = city.text;

}

// 使用城市名称创建option元素，添加到<select name="city">元素中

var op = document.createElement("option");

// 设置实际值

op.value = cityName;

// 设置显示值

var textNode = document.createTextNode(cityName);

op.appendChild(textNode);

citySelect.appendChild(op);

}

};

</script>

</head>

<body>

</select>  

</select>

</body>

</html>

----------------------------------------------------------------------------------------------------------------------------

ProvinceServlet

package com.wyc.web.servlet;

import java.io.IOException;

import java.io.InputStream;

import java.io.PrintWriter;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.IOUtils;

import org.dom4j.Attribute;

import org.dom4j.Document;

import org.dom4j.io.SAXReader;

public class ProvinceServlet extends HttpServlet {

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

response.setCharacterEncoding("utf-8");

* 响应所有省份名称，使用逗号分隔

* 1、Document对象

* * 创建解析器对象

* * 调用解析器的read()方法，传递一个流对象，得到Document

try {

SAXReader reader = new SAXReader();

InputStream input = this.getClass().getResourceAsStream("/china.xml");

Document doc = reader.read(input);

* 查询所有province的name属性，得到全部省份名

* 循环便利，把所有的属性值连接成一个字符串，发送给客户端

List<Attribute> list = doc.selectNodes("//province/@name");

StringBuilder sb = new StringBuilder();

for(Attribute attr : list){

sb.append(attr.getValue() + ",");

}

System.out.println(sb.toString());

response.getWriter().print(sb.substring(0, sb.length()-1));

} catch(Exception e) {

throw new RuntimeException(e);

}

----------------------------------------------------------------------------------------------------------------------------

CityServlet

package com.wyc.web.servlet;

import java.io.IOException;

import java.io.InputStream;

import java.io.PrintWriter;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.IOUtils;

import org.dom4j.Attribute;

import org.dom4j.Document;

import org.dom4j.DocumentException;

import org.dom4j.Element;

import org.dom4j.Node;

import org.dom4j.io.SAXReader;

import org.xml.sax.XMLReader;

public class CityServlet extends HttpServlet {

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

request.setCharacterEncoding("utf-8");

* 获取省份名称，加载该省份对应的<province>元素

* 把元素转换成字符串发送给客户端

* 1、获取省份名称

* 2、使用省份名称查找到对应的<province>元素

* 3、把<province>元素转换成字符串

* 4、发送给客户端

try {

* 得到Document

SAXReader reader = new SAXReader();

InputStream input = this.getClass().getResourceAsStream("/china.xml");

Document doc = reader.read(input);

* 获取参数

String pname = request.getParameter("province"); // 获取省份名称

Element ele = (Element) doc.selectSingleNode("//province[@name=‘" + pname + "‘]");

* 把元素转换成字符串

String xml = ele.asXML();

* 向客户端响应XML

* 需要将Content-Type改为：text/xml;charset=utf-8

response.setContentType("text/xml;charset=utf-8");

response.getWriter().print(xml);

} catch(Exception e) {

throw new RuntimeException(e);

}

——Ajax小工具

编写一个js文件。

// 创建request对象

function createXMLHttpRequest(){

return new XMLHttpRequest();

}

/*option对象属性

请求方式method, 请求URLurl, 是否异步asyn, 请求体内容params, 回调方法callback, 服务器相应数据转换类型type

function ajax(option){

* 1、得到xmlHttp

var xmlHttp = createXMLHttpRequest();

* 2、打开连接

if(!option.method){

// 默认为GET请求

option.method = "GET";

}

if(option.asyn == undefined){

// 默认为异步处理

option.asyn = true;

}

xmlHttp.open(option.method,option.url,option.asyn);

* 3、判断是否为POST请求

if(option.method == "POST"){

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

}

* 4、发送请求

xmlHttp.send(option.params);

* 5、注册监听

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

var data;

// 获取服务器的响应数据进行转换

if(!option.type){

// 默认为纯文本

data = xmlHttp.responseText;

} else if(option.type == "xml"){

data = xmlHttp.responseXML;

} else if(option.type == "text"){

data = xmlHttp.responseText;

} else if(option.type == "json"){

var text = xmlHttp.responseText;

data = eval("(" + text + ")");

}

// 调用回调方法

option.callback(data);

}

}

----------------------------------------------------------------------------------------------------------------------------

在JSP页面中进行调用

window.onload = function(){

var btn = document.getElementById("btn");

btn.onclick = function(){

* 1、发送请求

ajax(

{

url:"<c:url value=‘/AServlet‘ />",

type:"json",

callback:function(data){

document.getElementById("h2").innerHTML = data.name + ", " + data.age;

}

);

};

</script>

</head>

<body>

<h1>演示自己封装的小工具</h1>

<%-- 点击按钮后把服务器响应的数据显示到h2元素中 --%>

<h1>Hello World</h1>

</body>

以上是关于Ajax学习笔记的主要内容，如果未能解决你的问题，请参考以下文章