原生ajax和jquery ajax的使用

来源：互联网发布：正版广联达预算软件编辑：程序博客网时间：2024/05/17 08:52

在web项目开发中，我们经常会使用到ajax，那么接下来就对其做个总结吧！

1、定义

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

2、原生ajax

接下来将通过原生的ajax实现动态验证用户名是否可用的案例。

（1）在web 工程下创建index.jsp 文件，添加如下HTML元素实现文本框+按钮的样式布局

<%@ page language="java" import="java.util.*" pageEncoding="gbk" %><%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>    <base href="<%=basePath%>">        <title>My JSP 'index.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">-->  </head>    <body>      <input  onblur="btn_cl(this)" id="txt"><span id="s1"></span><br>   <input type="button" value="请求" onclick="">  </body></html>

（2）添加js代码，实现btn_cl()方法

<script type="text/javascript">var xmlhttp=new XMLHttpRequest();function btn_cl(e){xmlhttp.onreadystatechange=processRequest;xmlhttp.open("post","ShowMsgSerl?uname="+e.value);xmlhttp.send();}function processRequest(){if(xmlhttp.readyState==4&&xmlhttp.status==200){if(xmlhttp.responseText=="false"){document.getElementById("s1").innerHTML="用户已存在!";}else{document.getElementById("s1").innerHTML="用户名可以使用!";}}}</script>

（3）创建名为ShowMsgSerl的servlet文件实现验证并返回验证状态

package edu.zzuli.web.demo;import java.io.IOException;import java.io.PrintWriter;import java.util.Arrays;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ShowMsgSerl extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setCharacterEncoding("gbk");PrintWriter out= response.getWriter();List<String> user=Arrays.asList("zs","ls");String uname=request.getParameter("uname");for (String u : user) {if(u.equals(uname)){out.print(false);}}}}

接下来，运行项目即可实现ajax验证功能！

注：

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

3、jquery ajax

将通过jquery的ajax实现动态验证用户名是否可用的案例。

（1）在web 工程下添加jquery的依赖文件jquery-1.7.2.min.js，创建index.jsp 文件，添加如下HTML元素实现文本框+按钮的样式布局

<span style="font-size: 18px;"><%@ page language="java" import="java.util.*" pageEncoding="gbk" %><%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>    <base href="<%=basePath%>">        <title>My JSP 'index.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 src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>  </head>    <body>      <input  onblur="btn_cl(this)" id="txt"><span id="s1"></span><br>   <input type="button" value="请求" onclick="">  </body></html></span>

（2）添加js代码，实现btn_cl()方法

<pre name="code" class="java"><script type="text/javascript">var xmlhttp=new XMLHttpRequest();function btn_cl(e){$.post("ShowMsgSerl",{uname:e.value},function(data){if(data=="false"){Document.getElementById("s1").innerHTML="用户已存在!";}else{Document.getElementById("s1").innerHTML="用户名可以使用!";}});}</script>

（3）创建名为ShowMsgSerl的servlet文件实现验证并返回验证状态

package edu.zzuli.web.demo;import java.io.IOException;import java.io.PrintWriter;import java.util.Arrays;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ShowMsgSerl extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setCharacterEncoding("gbk");PrintWriter out= response.getWriter();List<String> user=Arrays.asList("zs","ls");String uname=request.getParameter("uname");for (String u : user) {if(u.equals(uname)){out.print(false);}}}}

接下来，运行项目即可实现ajax验证功能！

注：

$(selector).post(URL,data,function(data,status,xhr),dataType)

参数描述URL必需。规定将请求发送到哪个 URL。data可选。规定连同请求发送到服务器的数据。function(data,status,xhr)可选。规定当请求成功时运行的函数。
额外的参数：

data - 包含来自请求的结果数据
status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
xhr - 包含 XMLHttpRequest 对象

dataType可选。规定预期的服务器响应的数据类型。
默认地，jQuery 会智能判断。
可能的类型：

"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"script" - 以 JavaScript 运行响应，并以纯文本返回
"json" - 以 JSON 运行响应，并以 JavaScript 对象返回
"jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 "?callback=?" 到 URL 来规定回调

4、区别

JQuery、AJAX都是Javascript的一个框架，JQuery是轻量级的js库，他所实现的ajax不过是对底层的封装，实现了它的主旨：WRITE LESS,DO MORE。正因为的jquery 更容易实现ajax，所以项目开发中更偏向于jquery.

1 0