一、是什么？
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据，并在不重新加载整个页面的情况下更新部分网页
本质上是浏览器端的技术。
二、为什么需要Ajax？
有时候需要将本次响应结果和前面的响应结果在同一页面中展现给用户，例如百度搜索时下拉框里给出相关信息
解决：1.后台服务器将多次响应结果重新拼接成一个jsp页面，响应
2.使用Ajax技术
三、使用Ajax
访问原理：
使用流程：
1.创建Ajax引擎对象
2.复写onreadystatement函数
2.1 判断ajax状态码
2.2 判断响应状态码
2.3 获取响应内容，（响应内容的格式）
2.4 处理响应内容，（js改变文档结构）
3.发送请求
get：
post：
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性 描述 onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 readyState（ajax状态码） 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status （响应状态码） 200: "OK"
404: 未找到页面
500：
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) {//向mydiv中写入响应（xmlhttp.responseText）内容 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
<body>
<h3>欢迎登录</h3>
<hr>
<form action="" enctype="application/x-www-form-urlencoded" ></form>
用户名： <input name="uname" type="text" id="uname" value=""><br>
<input type="button" value="测试" onclick="ajaxReq()"><!-- 点击按钮，调用方法 -->
<div id="showdiv"></div>
<script type="text/javascript">
function ajaxReq(){
//获取用户请求数据
/* var name=document.getElementById("uname").value;
var data="name="+name; */
//创建引擎对象
var ajax;
if(window.XMLHttpRequest){//火狐所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){//IE
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//复写方法
ajax.onreadystatechange=function()
{//readystate有四种状态，可以对状态进行判断
if(ajax.readyState==4)
{
if(ajax.status==200)//响应状态码
{
//获取响应内容
var result=ajax.responseText;//返回是字符串
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML=result;
} else{
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="服务器繁忙";
}
}else{//请求在处理中，没有响应结果时
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="<img src='img/loading.gif'>";
}
}
//发送请求
//get方式
// ajax.open("get","js?name=zhangsan&pwd=123");//请求实体拼接在URL后面
// ajax.open("get","js?"+data);//请求实体拼接在URL后面
//ajax.send(null);
//post方式
ajax.open("post","js");
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//
ajax.send("name=post方法&pwd=123");
}
</script>
</body>Ajax的异步和同步：
异步：在处理
同步：等待执行完再执行后面的代码
ajax.open(method, url, async, username, password)
——method：请求方式，get和post
—— url：servlet的别名
——async：true 代表异步，默认异步。false 代表同步
Ajax的请求方式：
1.get方式：请求实体拼接在URL后面，?键值对
ajax.open("get","js?name=zhangsan&pwd=123");
ajax.send(null);
2.post方式：有单独的请求实体
ajax.open("post","js");
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//
ajax.send("name=name&pwd=123");
Ajax的响应数据类型：
1. 普通字符串：var result=ajax.responsText
2. JSON：(javaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法将接受的字符串直接转换为js的对象。
格式：var 对象名 = {
属性名：属性值，
属性名：属性值，
}
json 对象由花括号括起来的逗号分割的成员构成，
{"name":"John Doe","age": 18,"address": {"country":"china","zip-code":"10000"}}
利用Gson拼接成字符串
resp.getWriter().write(new Gson().toJson(u));
利用 eval（）转成js对象
var result=ajax.responseText;
eval("var u="+result);
ajaxData.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>ajax响应的数据类型</title>
<!-- 需求：
在当前页面显示搜索结果，考虑使用ajax
创建ajax对象
调用ajax函数发请求到userservlet
调用业务层获取对应的函数
-->
<script type="text/javascript">
function getData(){
//1.获取用户输入信息
var name=document.getElementById("name").value;
//2.创建ajax对象
var ajax;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//3.复写函数
ajax.onreadystatechange=function() {
//状态进行判断
if(ajax.readyState==4) {
if(ajax.status==200){//响应状态码
//获取响应数据
var result=ajax.responseText;
eval("var u="+result);
//处理响应数据
//获取table表格对象
var ta=document.getElementById("ta");
//插入新的行
var tr= ta.insertRow(1);
var cell0=tr.insertCell(0);
cell0.innerHTML=u.uid;
var cell1=tr.insertCell(1);
cell1.innerHTML=u.uname;
var cell2=tr.insertCell(2);
cell2.innerHTML=u.desc;
var cell3=tr.insertCell(3);
cell3.innerHTML=u.prices;
}
}
};
//4.发送请求
ajax.open("get","user?uname="+name);
ajax.send(null);
};
</script>
</head>
<body>
<h3>欢迎访问</h3><hr>
专业名称：<input type="text" name="name" value="" id="name">
<input type="button" value="搜索" onclick="getData()" > <hr>
<table border="1px" cellspacing="0" id="ta">
<tr>
<td>编号</td>
<td>名称</td>
<td>介绍</td>
<td>学费</td>
</tr>
</table>
</body>
</html>
userServlet
public class user extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//设置请求编码格式
req.setCharacterEncoding("utf-8");
//设置响应编码格式
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//获取请求信息
String name=req.getParameter("uname");
System.out.println("servlet用户请求信息："+name);
//处理请求信息
//获取业务层对象
UserService us=new UserServiceImp();
//处理业务
vo.User u=us.getUserInfoService(name);
System.out.println("查询结果为："+u);
//响应处理信息
//要给js
/*(方式1：)resp.getWriter().write("var obj={};obj.name='zhangsan';obj.pwd=123;");
* jsp中： eval(result);
alert(obj.name);
* 在后台定义var obj={ } ，限制前端必须用obj，不方便
* */
/*（方式2：）没有指向
resp.getWriter().write( "var obj={name:'libai',pwd:123}");
eval(result)
resp.getWriter().write( "{name:'libai',pwd:123}");
eval("var obj="+result);
*/
//利用Gson拼接成json字符串
resp.getWriter().write(new Gson().toJson(u));
}
}
3. XML：var result=ajax.responseXML
resp.getWriter().write("<user><uid>1</uid><uname>张三</uname><price>800</price></user>");
var doc=ajax.responseXML;//[object XMLDocument]
alert(doc.getElementsByTagName("uname"));//[object HTMLCollection]
alert(doc.getElementsByTagName("uname")[0].innerHTML);//张三
Ajax的封装：
2758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
