Ajax

来源：互联网发布：php mysql增删改查编辑：程序博客网时间：2024/06/08 07:58

testAjax.jsp

<%@ 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 'MyJsp.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>function test() {//第一步：创建XMLHttpRequest对象var request;if (window.XMLHttpRequest) {request = new XMLHttpRequest();} else if (window.ActiveXObject) {request = new ActiveXObject("Msxml2.XMLHTTP");}//第二步：使用XMLHttprequest创建请求request.open("get", "AjaxServlet");//request.open(method, url, async, username, password)后面两个可以不填，其中的url是web.xml中的servlet-mapping的ur//asyncl是否异步，默认是true//第三部：写回调函数处理服务器返回的数据request.onreadystatechange = function() { //onreadystatechange是当readystate改变时触发这个函数if (request.readyState == 4) { //request.readyState返回1,2,3,4分别代表不同的含义，其中4是传输成功的意思var result = request.responseText; //得到服务器返回的数据document.getElementById("show").innerHTML = result;}}request.send(null);  //如果不加null火狐会报错}</script></head><body><div id="show"></div><input type="button" value="测试" onclick="test()" /></body></html>

AjaxServlet

package action;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 AjaxServlet 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 {PrintWriter out = response.getWriter();out.println("Hello Ajax !");out.flush();out.close();}}

关于HTTP状态码（其实就是一个status方法）

修改testAjax.jsp中的JS

<script>function test() {//第一步：创建XMLHttpRequest对象var request;if (window.XMLHttpRequest) {request = new XMLHttpRequest();} else if (window.ActiveXObject) {request = new ActiveXObject("Msxml2.XMLHTTP");}//第二步：使用XMLHttprequest创建请求request.open("get", "AjaxServlet");//request.open(method, url, async, username, password)后面两个可以不填，其中的url是web.xml中的servlet-mapping的ur//asyncl是否异步，默认是true//第三部：写回调函数处理服务器返回的数据request.onreadystatechange = function() { //onreadystatechange是当readystate改变时触发这个函数if(request.status==200){  //Http状态码 200为请求成功if (request.readyState == 4) { //request.readyState返回1,2,3,4分别代表不同的含义，其中4是传输成功的意思var result = request.responseText; //得到服务器返回的数据document.getElementById("show").innerHTML = result;}}else if(request.status==404){  //想测试404的话可以修改创建请求时的路径document.getElementById("show").innerHTML = "请求资源未找到！";}else if(request.status==500){document.getElemenById("show").innnerHTML = "内部服务器错误 ！";}}request.send(null);}</script>

异步同步的表达

修改testAjax.jsp中的JS

<script>function test() {//第一步：创建XMLHttpRequest对象var request;if (window.XMLHttpRequest) {request = new XMLHttpRequest();} else if (window.ActiveXObject) {request = new ActiveXObject("Msxml2.XMLHTTP");}//第二步：使用XMLHttprequest创建请求request.open("get", "AjaxServlet", true);//request.open(method, url, async, username, password)后面两个可以不填，其中的url是web.xml中的servlet-mapping的ur//asyncl是否异步，默认是true//第三部：写回调函数处理服务器返回的数据request.onreadystatechange = function() { //onreadystatechange是当readystate改变时触发这个函数if (request.readyState == 4) { //request.readyState返回1,2,3,4分别代表不同的含义，其中4是传输成功的意思var result = request.responseText; //得到服务器返回的数据document.getElementById("show").innerHTML = result;}}request.send(null);alert("异步的操作！");//设置为异步之后可以比作为同时运行，而不会等待其中一个返回再接着运行}</script>

在AjaxServlet返回数据前加一句

try {Thread.sleep(3000);} catch (InterruptedException e) {e.printStackTrace();}

Get，Post传参

AjaxServlet

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.getWriter().println(request.getParameter("a"));}

Get传参

request.open("get", "AjaxServlet?a=123", true);

Post传参

request.open("post", "AjaxServlet", true);request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");request.send("a=123");

Ajax的封装

封装过程

<script>function createAjaxObj() {var requset;if (window.XMLHttpRequest) {request = new XMLHttpRequest();} else if (window.ActiveXObject) {request = new ActiveXObject("Msxml2.XMLHTTP");}return request;}function test() {var request = createAjaxObj();request.onreadystatechange = function() {if (request.readyState == 4) {if (request.status == 200) {handle200(request);} else if (request.status == 404) {handle404(request);} else if (request.status == 500) {handle500(request);}else{loading();}}}request.open("post", "aAjaxServlet", true);request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");request.send("a=123");}function handle200(request) {var result = request.responseText;document.getElementById("show").innerHTML = result;}function handle404(request) {document.getElementById("show").innerHTML = "No find !";}function handle500(request) {document.getElementById("show").innerHTML = "Server is busy !";}function loading(){document.getElementById("show").innerHTML = "Finding !";}</script>

封装结果 ajaxUtil.js

function createAjaxObj() {var requset;if (window.XMLHttpRequest) {request = new XMLHttpRequest();} else if (window.ActiveXObject) {request = new ActiveXObject("Msxml2.XMLHTTP");}return request;}function test(method, url, data, asychn, loading, handle200, handle404,handle500) {var request = createAjaxObj();request.onreadystatechange = function() {if (request.readyState == 4) {if (request.status == 200) {if (handle200) { //如果为空则不处理handle200(request);}} else if (request.status == 404) {if (handle404) {handle200(request);}} else if (request.status == 500) {if (handle500) {handle500(request);}} else {if (loading) {loading();}}}//下面处理get和postif ("get" == method.toLowerCase()) {if (data == null || data == "") {request.open(method, url, asychn);} else {request.open(method, url + "?" + data, asychn);}request.send(null);} else if ("post" == method.toLowerCase) {}request.open("post", url, asych);request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");request.send(data);}}