#Ajax：只刷新局部页面的技术
###JavaScript：更新局部的网页
###XML：一般用于请求数据和响应数据的封装
###XMLHttpRequest对象：发送请求到服务器并获得返回结果
###CSS：美化页面样式
###异步：发送请求后不等返回结果，由回调函数处理结果
##JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力
##构造方法
###不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。
<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/myJS.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
window.onload = function() {
//1、获取XMLHttpRequest对象
var req = getXMLHttpRequest();
//4、处理响应结果
req.onreadystatechange = function(){
//alert(req.readyState);
if(req.readyState==4){
//alert(req.status);//查看服务器端响应状态
if(req.status==200){//服务器响应一切正常
alert(req.responseText);
}
}
}
//2、建立一个连接
req.open("get","${pageContext.request.contextPath }/servlet/servletDemo1");
//3、发送请求
req.send(null);
}
</script>
<body>
</body>
</html>
package servlet_ajax;
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 ServletDemo1 extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
out.print("hello servlet");
}
}
##二、常用方法
方法名 说 明
open(method,URL,async) 建立与服务器的连接
method参数指定请求的HTTP方法,典型的值是GET或POST
URL参数指请求的地址
async参数指定是否使用异步请求，其值为true或false
send(content) 发送请求
content参数指定请求的参数
setRequestHeader(header,value) 设置请求的头信息
##三、常用属性
onreadystatechange：指定回调函数
readyState: XMLHttpRequest的状态信息
就绪状态码 说 明
0 XMLHttpRequest对象没有完成初始化
即：刚刚创建。
1 XMLHttpRequest对象开始发送请求
调用了open方法，但还没有调用send方法。请求还没有发出
2 XMLHttpRequest对象的请求发送完成
send方法已经调用，数据已经提交到服务器，但没有任何响应
3 XMLHttpRequest对象开始读取响应，还没有结束
收到了所有的响应消息头，但正文还没有完全收到
4 XMLHttpRequest对象读取响应结束
一切都收到了
##status：HTTP的状态码
状态码 说 明
200 服务器响应正常
400 无法找到请求的资源
403 没有访问权限
404 访问的资源不存在
500 服务器内部错误
responseText：获得响应的文本内容
responseXML：获得响应的XML文档对象 documednt
####注：就绪状态是4而且状态码是200，才可以处理服务器数据
**
ajax前台代码
**
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("input").click(function(){
//0.1 请求路径
var url = "/ee19_jquery_day02/SendDataServlet";
//0.2 请求参数，采用json
var params = {"username":"杰克", "password":"1234"};
/* 1 load()函数 ，必须使用jquery对象
* * 格式：load(url, [data], [callback])
* 参数1：url ，请求路径
* 参数2：data，请求参数
* 参数3：callback，回调函数
* * 如果没有请求参数，发送的GET请求
* * 如果有请求参数，发送的POST请求。请求没有中文乱码
* * 回调函数的参数
* 参数1：data，响应数据。load()永远获得字符串，如果需要使用，必须手动转换json对象。
$(this).load(url,params,function(data){
//转换json对象
var jsonData = eval("("+data+")");
alert(jsonData.message);
});
*/
/* 2 $.get() 全局函数，发送get请求
* * 格式：jQuery.get(url, [data], [callback], [type])
* * 参数4：type ，返回内容格式，xml, html, script, json, text, _default。
* * GET请求不适合发送中文数据，存放请求的中文乱码。
* 必须手动解码 new String(username.getBytes("ISO-8859-1") ,"UTF-8")
* * 响应数据，如果使用 application/json;charset=UTF-8 ，jQuery自动将数据转换json对象。
* * 响应数据，如果使用 text/html;charset=UTF-8 ，回调函数获得字符串数据，需要手动转换。
* 使用“参数4”，设置"json"，jQuery将字符串 转换成 json对象
$.get(url,params,function(data){
alert(data);
},"json");
*/
/* 3 $.post() 全局函数，发送post请求
* * 格式：jQuery.post(url, [data], [callback], [type])
$.post(url,params,function(data){
alert(data);
},"json")
*/
/* 4 $.ajax() 底层功能最强大的
* * 格式：jQuery.ajax([settings])
* 参数settings：设置所有的参数
* url:发送请求的地址
* data:发送到服务器的数据,请求参数
* type:请求方式 ("POST" 或 "GET")，
* success:成功的回调函数，success(data, textStatus, jqXHR)
* error:请求失败时调用此函数
* dataType:预期服务器返回的数据类型
* "xml": 返回 XML 文档，可用 jQuery 处理。
* "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
* "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
* "json": 返回 JSON 数据 。
* "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
* "text": 返回纯文本字符串
*/
$.ajax({
"url":url,
"data":params,
"type":"POST",
"success":function(data){
alert(data);
},
"error":function(){
alert("服务器繁忙，请稍后重试");
},
"dataType":"json"
});
});
});
</script>
</head>
<body>
<input type="button" value="发送ajax" />
</body>
</html>
#servlet/SendDataServlet代码
package servlet;
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 SendDataServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1.获得请求方式：GET、POST
String method = request.getMethod();
System.out.println("1.请求方式：" + method);
// 2.获得请求参数
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("2.请求参数：" + username);
System.out.println("2.请求参数：" + password);
// 3.响应数据 JSON
//3.1 手动编写
// String jsonData = "{'message':'成功了'}"; //畸形json格式
String jsonData = "{\"message\":\"成功了\"}";
//3.2 响应的中文乱码
// response.setContentType("text/html;charset=UTF-8"); //html数据，不标准
response.setContentType("application/json;charset=UTF-8");
//3.3 发送数据
response.getWriter().print(jsonData);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
