ajax的使用

时间  2019-11-20
标签 ajax 使用 栏目 Ajax 繁體版
原文   原文链接

1.ajax

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

 

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

 

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

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

优势：web

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

 

     AJAX无须刷新整个页面；浏览器

 

   由于服务器响应内容再也不是整个页面，而是页面中的局部，因此AJAX性能高；服务器

 

缺点：app

 

    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");
}
}

}

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程