@weidong 2017-10-20T15:42:59.000000Z 字数 2782 阅读 311

AJAX_学生版

JavaWeb

AJAX 简介

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
局部更新(刷新)

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

AJAX 应用场景

搜索框输入关键字时，JavaScript会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
实时翻译,在翻译框输入内容,会实时显示翻译结果
网站注册账号

AJAX 实例

界面中包含了一个h1和一个按钮标签
h1 用来显示来自服务器的信息,当点击按钮时,它负责调用名为alterH1的方法,使用AJAX发起一个请求,获取1.txt文件的内容进行显示

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>My JSP 'ajax3.jsp' starting page</title>
<script type="text/javascript">
    function alterH1() {
        //1. 创建XMLHTTPRequest对象
        var xmlHttp = new XMLHttpRequest();
        //2. 设置请求的监听事件
        xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                // 获取的h1 控件
                var h1 = document.getElementById("h1");
                // 获取到请求后的结果
                var text = xmlHttp.responseText;
                // 将获取到的内容设置到h1 控件中
                h1.innerHTML = text;
            }
        };  
        //3. 打开和服务器的连接
        xmlHttp.open("GET", "http://localhost/AJAX/txt/1.txt",true);
        //4. 发送请求
        xmlHttp.send();
    };
</script>
</head>
<body>
    <button onclick="alterH1()" type="button">点我修改内容</button>
    <h1 id="h1">我是内容</h1>
</body>
</html>

AJAX的开发步骤

AJAX核心就是XMLHttpRequest对象。
- 开发步骤
  - 1.创建XMLHTTPRequest对象
  - 2.设置请求的监听事件
  - 3.打开和服务器的连接
  - 4.发送请求

具体实现

1.创建XMLHttpRequest对象（JS对象）
- 注意:此处的判断是为了兼容不同的浏览器

var xmlhttp=null;
if (window.XMLHttpRequest){
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}else if (window.ActiveXObject){
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.注册请求的监听事件，当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息(5个)
- readyState
  - 0 请求未初始化
  - 1 服务器连接已建立
  - 2 请求已接收
  - 3 请求处理中
  - 4 请求已完成,且响应已就绪
- status
  - 200 请求成功
  - 404 未找到界面
  - 更多状态码请看:http://www.cnblogs.com/chris-oil/p/3366641.html
- 在回调函数中可以通过以下方式获取服务器返回的数据
  - responseText
  - responseXML
- 规定当服务器响应已做好被处理的准备时所执行的任务。
```
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        //处理结果
    }
}
```
3.打开和服务器的连接
- open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
  - method：请求的类型；GET 或 POST
  - url：文件(资源)在服务器上的位置
  - async：true（异步）或 false（同步）
4.发送请求
- send(String) 将请求发送到服务器。
  - string：设置 POST 请求携带的参数
- 什么时候使用GET POST ?
  - 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用,在以下情况,可以使用POST请求
    - 无法使用缓存文件（更新服务器上的文件或数据库）
    - 向服务器发送大量数据（POST 没有数据量限制）
    - 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠(安全性)
案例演示,使用AJAX访问Servlet

AJAX 操作中请求参数的设置问题

1.对于GET请求方式
- 参数设置：直接在url后面拼接
  例如："http://localhost/AJAX/MyServlet2?name=lisi"

2.对于POST请求方式

xmlhttp.open("POST","http://localhost/AJAX/Aservlet2");
xmlhttp.send("name=lisi");

注意：如果是POST请求方式，还需要设置一个http请求头。

xmlhttp.setRequestHeader("","");
例如：

xmlhttp.open("POST","http://localhost/AJAX/Aservlet2"); 
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");   
xmlhttp.send("name=list");

// Aservlet2
public void doGet(HttpServletRequest request, HttpServletResponse response) 
    throws ServletException, IOException {
    String name = request.getParameter("name");
    response.getWriter().write("hello "+name);
    response.getWriter().close();
}

AJAX_学生版

AJAX 简介

什么是 AJAX ？

AJAX 应用场景

AJAX 实例

AJAX的开发步骤

具体实现

AJAX 操作中请求参数的设置问题

AJAX案例：验证用户名是否可用

BaseServlet 编写

AJAX_学生版

AJAX 简介

什么是 AJAX ？

AJAX 应用场景

AJAX 实例

AJAX的开发步骤

具体实现

AJAX 操作中请求参数的设置问题

AJAX案例：验证用户名是否可用

BaseServlet 编写

内容目录