原生ajax和jquery ajax的使用
在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+"/";
%>
My JSP 'index.jsp' starting page
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 user=Arrays.asList("zs","ls");
String uname=request.getParameter("uname");
for (String u : user) {
if(u.equals(uname)){
out.print(false);
}
}
}
}
注：
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status | 200: "OK" 404: 未找到页面 |
3、jquery ajax
将通过jquery的ajax实现动态验证用户名是否可用的案例。
（1）在web 工程下添加jquery的依赖文件jquery-1.7.2.min.js，创建index.jsp 文件，添加如下HTML元素实现文本框+按钮的样式布局
<%@ page language="java" import="java.util.*" pageEncoding="gbk" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
My JSP 'index.jsp' starting page
（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 user=Arrays.asList("zs","ls");
String uname=request.getParameter("uname");
for (String u : user) {
if(u.equals(uname)){
out.print(false);
}
}
}
}
注：
$(
selector).post(
URL,data,function(data,status,xhr),dataType)
| 参数 | 描述 |
|---|---|
| URL | 必需。规定将请求发送到哪个 URL。 |
| data | 可选。规定连同请求发送到服务器的数据。 |
| function(data,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数：
|
| dataType | 可选。规定预期的服务器响应的数据类型。 默认地，jQuery 会智能判断。 可能的类型：
|
4、区别
JQuery、AJAX都是Javascript的一个框架，JQuery是轻量级的js库，他所实现的ajax不过是对底层的封装，实现了它的主旨：WRITE LESS,DO MORE。正因为的jquery 更容易实现ajax，所以项目开发中更偏向于jquery.