原生ajax和jquery ajax的使用
2016-07-31 09:28
363 查看
在web项目开发中，我们经常会使用到ajax，那么接下来就对其做个总结吧！
1、定义
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
2、原生ajax
接下来将通过原生的ajax实现动态验证用户名是否可用的案例。
（1）在web 工程下创建index.jsp 文件，添加如下HTML元素实现文本框+按钮的样式布局
3、jquery ajax
将通过jquery的ajax实现动态验证用户名是否可用的案例。
（1）在web 工程下添加jquery的依赖文件jquery-1.7.2.min.js，创建index.jsp
文件，添加如下HTML元素实现文本框+按钮的样式布局
（3）创建名为ShowMsgSerl的servlet文件实现验证并返回验证状态
注：
$(selector).post(URL,data,function(data,status,xhr),dataType)
4、区别
JQuery、AJAX都是Javascript的一个框架，JQuery是轻量级的js库，他所实现的ajax不过是对底层的封装，实现了它的主旨：WRITE LESS,DO MORE。正因为的jquery 更容易实现ajax，所以项目开发中更偏向于jquery.
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: 未找到页面 |
将通过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 来规定回调 |
JQuery、AJAX都是Javascript的一个框架，JQuery是轻量级的js库，他所实现的ajax不过是对底层的封装，实现了它的主旨：WRITE LESS,DO MORE。正因为的jquery 更容易实现ajax，所以项目开发中更偏向于jquery.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery Ajax实例(三)-ajax在aspx页面中的使用
- MVC中使用Ajax提交数据 Jquery Ajax方法传值到action
- jquery ajax教程第3课-使用ajax提交form表单(转)
- 原生Ajax的XMLHttpRequest对象使用指南
- [译]脱离jQuery，使用原生Ajax
- 使用Jquery Ajax的webservice请求来实现更简练的Ajax
- 使用原生javascript实现ajax提交form表单
- AJAX学习笔记之原生JS使用方法
- 原生Ajax 和jQuery Ajax的区别示例分析
- jQuery Ajax 使用 ($.ajax、$.post、$.get)
- jquery ajax 和 ajax的使用
- 原生ajax 与jquery ajax 的对比
- 使用Jquery Ajax的webservice请求来实现更简练的Ajax
- AJAX学习笔记之XML对象原生JS使用方法
- 使用原生JS编写ajax操作XMLHttpRequst对象
- ajax使用回调函数的例子（原生代码和jquery代码）
- jquery 使用$.ajax 时获取原生XMLHttpRequest 对象
- 使用原生ajax异步加载数据
- jQuery Ajax 实例 详细介绍$.ajax、$.post、$.get的使用
- jQuery Ajax 实例 具体介绍$.ajax、$.post、$.get的使用