ajax的使用

1.ajax

       AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，它一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。

      同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

      异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

例子：    在用户注册用户时，输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”，整个过程中页面没有刷新，只是局部刷新了， 在请求发出后，浏览器不用等待   服务器响应结果就可以进行其他操作。

优点：

     AJAX使用Javascript技术向服务器发送异步请求；

     AJAX无须刷新整个页面；

   因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

缺点：

    AJAX并不适合所有场景，很多时候还是要使用同步交互；

    AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；

    因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

2.创建ajax的步骤：

1.创建XMLHttpRequest对象；

2.调用open()方法打开与服务器的连接；

3.调用send()方法发送请求；

4.为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在XMLHttpRequest的1、2、3、4，四种状态时被调用；

XMLHttpRequest对象的5种状态：

0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；

1：请求已开始，open()方法已调用，但还没调用send()方法；

2：请求发送完成状态，send()方法已调用；

3：开始读取服务器响应；

4：读取服务器响应结束。

通常我们只关心4状态。

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

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

2.ajax例子

2.1 首先创建一个servlet：

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println(request.getParameter("b"));
        System.out.println("Hello AJAX!");
        response.getWriter().print("Hello AJAX!");
    }

接着创建一个jsp：

<script type="text/javascript">
function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();//大多数浏览器
    } catch (e) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
}

function send() {
    var xmlHttp = createXMLHttpRequest(); //1. 得到异步对象 
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {// 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功）
            var div = document.getElementById("div1");
            div.innerHTML = xmlHttp.responseText;
        }
    };
    xmlHttp.open("POST", "/ajaxdemo1/AServlet?a=A", true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//设置请求头
  xmlHttp.send("b=B");//使用send()方法来设置请求体内容。如果是GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！






}
</script>
<h1>AJAX2</h1>
<button onclick="send()">测试</button>
<div id="div1"></div>

2.2 判断用户名是否已被注册

      在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！

创建register.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'ajax3.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多数浏览器
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch (e) {
throw e;
}
}
}
}


window.onload = function() {
// 获取文本框，给它的失去焦点事件注册监听
var userEle = document.getElementById("usernameEle");
userEle.onblur = function() {
//1.得到异步对象
var xmlHttp = createXMLHttpRequest();
//2.打开连接
xmlHttp.open("POST", "<c:url value='/ValidateUsernameServlet'/>", true);
//3.设置请求头：Content-Type
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.发送请求，给出请求体
xmlHttp.send("username=" + userEle.value);

//5.给xmlHttp的onreadystatechange事件注册监听
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断
//获取服务器的响应，判断是否为1
// 是：获取span，添加内容：“用户名已被注册”
var text = xmlHttp.responseText;
var span = document.getElementById("errorSpan");
if(text == "1") {
//得到span元素
span.innerHTML = "用户名已被注册！";
} else {
span.innerHTML = "";
}
}
};
};
};
</script>
</head>

<body>
<h1>演示用户名是否被注册</h1>
<form action="" method="post">
用户名：<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span><br/>
密　码：<input type="password" name="password"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>

创建servlet：

package cn.itcast.web.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ValidateUsernameServlet extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
if (username.equalsIgnoreCase("it")) {
response.getWriter().print("1");
} else {
response.getWriter().print("0");
}
}

}

 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/y3596597/p/6826940.html