Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

naughty610

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量692

点赞数

分类专栏： JS 文章标签： xmlhttprequest javascript asynchronous ajax servlet server

本文链接：https://blog.csdn.net/naughty610/article/details/6237109

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

昨天晚上开始看了一下ajax，觉得有必要了解一下具体情况。今天下课就过来实验室看看。发现其实上个项目中很多东西都可以用到ajax的，这样就不会导致整个页面刷新了。

Ajax是asynchronous javascript and xml的简写。不是一项具体的技术，而是几门技术的综合应用。其核心只不过是要在javascript中调用一个叫XMLHttpRequest的javascript类，这个类可以与Web服务器使用HTTP协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的JavaScript对象发送请求，再由这个JavaScript对象接收响应，并将响应结果用DOM编程方式挂到原来的网页上，从而使得javascript借助这个api类可以干出比较有意义的事情。

一个简单的例子，验证注册时候的用户名是否可用。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <mce:script type="text/javascript"></mce:script> </head> <body> <input type="text" name="userName" id="userName" οnblur="checkUser();" /> <span id="checkResult"></span> <br /> <input type="password" name="pwd" id="pwd" /> </body> </html>

其中xmlhttprequest中的一个事件onreadystatechange是一个事件，又是一个函数。

Servlet如下：

import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class CheckU extends HttpServlet { /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); String userName = request.getParameter("userName"); if(!userName.equals("abc")){ response.getWriter().print("恭喜您，用户名可以使用!"); }else{ response.getWriter().print("对不起，用户名已被占用！"); } } }

web.xml如下配置：

<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>CheckU</servlet-name> <servlet-class>CheckU</servlet-class> </servlet> <servlet-mapping> <servlet-name>CheckU</servlet-name> <url-pattern>/checkU</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>

另外，

xmlhttp的send是传递参数用的,但是只有在使用post方式提交请求的时候才有用

如下:
xmlhttp.open("post",url,true);
...
xmlhttp.send("data=data&data2=data2");

用get的话一般就是：
xmlhttp.open("get",url,true);
...
xmlhttp.send(null);