Ajax 异步请求

来源：互联网发布：淘宝店铺装修购买编辑：程序博客网时间：2024/06/05 07:15

Ajax 异步请求的步骤：

a.创建XMLHttpRequest对象

b.将状态触发器绑定到一个函数

c.使用open方法建立与服务器的连接

d.向服务器端发送数据

e.在回调函数中对返回数据进行处理

XMLHttpRequest的方法与属性：

方法： open与send

open(method,url, asynch) ：建立对服务器的调用

(method 表示请求方式, url 请求路径, asynch 是否异步,对于 asynch 的值通常不会设置, 默认是true,表示异步发送请求)

send(content) ：向服务器发送请求

属性：

onreadystatechange ：状态回调函数

responseText/responseXML ：服务器的响应字符串

status：服务器返回的HTTP状态码

statusText: 服务器返回的HTTP状态信息

readyState ：对象状态（0-4）

0 = 未初始化 1 = 正在加载 2 = 已加载

3 = 交互中

4 = 完成

使用Ajax，客户端向服务器提交的数据有get 和 post 两种方式：

get方式：

xmlHttpRequest.open("GET","url?key=value");//get方式发送数据，参数在URL上携带

xmlHttpRequest.send(null);

post方式：

xmlHttpRequest.open("POST","url");//post方式发送数据，URL上不需要携带参数。

xmlHttpRequest.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); // post发送参数前，需要设置编码格式

xmlHttpRequest.send("name=xxx&pwd=xxx"); // 发送post数据

回调函数编写：

if(xmlHttpRequest.readyState == 4){

// 判断数据是否正确

if(xmlHttp.status == 200){

// 响应有效，这里写需要完成的任务

...

}

下面是一个JSP页面的简单实例：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

function showMessage(){

var username = document.getElementById("username").value;

// 1.通过xmlFunction（）获取XMLHttpRequest对象

var xmlHttpRequest = ajaxFunction();

// 2. 绑定回调函数，数据处理

xmlHttpRequest.onreadystatechange= function(){

if(xmlHttpRequest.readyState==4){

if(xmlHttpRequest.status==200){

// 这里编写需要完成的数据处理

// 获得message标签,即span标签

var message = document.getElementById("message");

message.innerHTML =xmlHttpRequest.responseText;

}

};

//get方式

// 3. 设置请求方式, 确定要访问的具体的资源路径

//xmlHttpRequest.open("get","${pageContext.request.contextPath}/hello?username="+username);

//4. 发送请求

//xmlHttpRequest.send(null);

//post方式

// 3. 设置请求方式 , 确定要访问具体的资源路径

xmlHttpRequest.open("post","${pageContext.request.contextPath}/hello");

// post 请求时必须要设置编码格式,ajax 用于告诉服务器端程序过去的数据的编码类型

xmlHttpRequest.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");

// 注意 :post请求方式不能在请求的url地址后携带参数 ,需要在send方法中携带参数

//4.发送请求

xmlHttpRequest.send("username="+username);

}

//定义ajaxFunction(来自W3C文档)，根据不同的浏览器类型来创建XMLHttpRequest对象

function ajaxFunction()

{

varxmlHttpRequest;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttpRequest=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

try

{

xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e)

{

alert("您的浏览器不支持AJAX！");

return false;

}

returnxmlHttpRequest;

}

</script>

</head>

<body>

用户名:<input type="text" name="username" onblur="showMessage();" id="username">

</form>

</body>

</html>

HelloServlet的代码如下：

package org.test.hello;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class HelloServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// 获取request域中的参数

String username = request.getParameter("username");

// get方式请求，需要解码

username = new String(username.getBytes("ISO8859-1"),"utf-8");

response.setContentType("text/html;charset=utf-8");

response.getWriter().print("Hello，" + username+"!");

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

String username = request.getParameter("username");

response.setContentType("text/html;charset=utf-8");

response.getWriter().print("Hello，" + username+"!");

}

0 0