ajax
Posted sunnysml
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax相关的知识，希望对你有一定的参考价值。
概念
ajax全称为“Asynchronous javascript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。局部刷新技术。不是一门新技术，是多种技术的组合。是浏览器端的技术。
作用
实现在当前结果页中显示其他请求的响应内容
ajax的状态码(readyState)
0 表示XMLHttpRequest已建立，但还未初始化，这时尚未调用open方法
1 表示open方法已经调用，但未调用send方法（已创建，未发送）
2 表示send方法已经调用，其他数据未知
3 表示请求已经成功发送，正在接受数据
4 表示数据已经成功接收。
响应状态码(status)
200：请求成功
404：请求资源未找到
500：内部服务器错误
使用
ajax的基本流程
1）创建ajax引擎对象
2）复写onreadystatement函数
3）判断ajax状态码
4）判断响应状态码
5）获取响应内容(响应内容的格式)
普通字符串：responseText
json(重点)：responseText
其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法
将接收的字符串数据直接转换为js的对象
json格式：
var 对象名={
属性名:属性值,
属性名:属性值,
……
}
XML数据：responseXML.返回document对象
通过document对象将数据从xml中获取出来
6）处理响应内容(js操作文档结构)
7）发送请求
get请求
get的请求实体拼接在URL后面，？隔开，键值对
ajax.open("get","url");
ajax.send(null);
post请求
有单独的请求实体
ajax.open("post", "url");
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("name=张三&pwd=123");
<%@ 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"> <title>Insert title here</title> <!-- 声明js代码域 --> <script type="text/javascript"> function getData(){ //创建ajax引擎对象 var ajax; if(window.XMLHttpRequest){//火狐 ajax=new XMLHttpRequest(); }else if(window.ActiveXObject){//IE ajax=new ActiveXObject("Msxml2.XMLHTTP"); } //复写onreadystatement函数 ajax.onreadystatechange=function(){ //判断Ajax状态吗 if(ajax.readyState==4){ //判断响应状态吗 if(ajax.status==200){ //获取响应内容 var result=ajax.responseText; //处理响应内容 //获取元素对象 var showdiv=document.getElementById("showdiv"); showdiv.innerHTML=result; }else if(ajax.status==404){ //获取元素对象 var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="请求资源不存在"; }else if(ajax.status==500){ //获取元素对象 var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="服务器繁忙"; } }else{ //获取元素对象 var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="<img src=‘img/2.gif‘ width=‘200px‘ height=‘100px‘/>"; } } //发送请求 //get方式:请求实体拼接在URL后面 ajax.open("get","ajax?"+data); ajax.send(null); //post方式：请求实体需要单独的发送 ajax.open("post", "ajax"); ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send("name=张三&pwd=123"); } </script> <style type="text/css"> #showdiv{ border:solid 1px; width:200px; height:100px; } </style> </head> <body> <h3>欢迎登录403峡谷</h3> <hr> <input type="button" value="测试 " onclick="getData()"/> <div id="showdiv"></div> </body> </html>
ajax的异步和同步
ajax.open(method,urL,async)
async：设置同步代码执行还是异步代码执行
true代表异步，默认是异步
false代表同步
例：ajax.open("get","ajax",true);
json格式获取响应内容
responseText
其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法
将接收的字符串数据直接转换为js的对象
json格式：
var 对象名={
属性名:属性值,
属性名:属性值,
……
}
<%@ 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"> <title>Insert title here</title> <!-- 需求分析： 1、在当前页面内显示查询结果，考虑使用ajax 2、创建ajax函数 3、调用ajax函数发送请求到UserServlet 4、调用业务层获取对应的数据 --> <!-- 声明js代码域 --> <script type="text/javascript" src="js/ajaxUtil.js"></script> <script type="text/javascript"> //获取数据 function getData(){ //获取用户请求信息 var name=document.getElementById("uname").value; //创建ajax引擎对象 var ajax; if(window.XMLHttpRequest){ ajax=new XMLHttpRequest(); }else if(window.ActiveXObject){ ajax=new ActiveXObject("Msxml2.XMLHTTP"); } //复写onreadystatechange ajax.onreadystatechange=function(){ //判断ajax状态码 if(ajax.readyState==4){ //判断响应状态码 if(ajax.status==200){ //获取响应数据 var result=ajax.responseText; //eval("var obj="+result); //alert(obj.name); eval("var u="+result); alert(result); //处理响应数据 //获取table表格对象 var ta=document.getElementById("ta"); ta.innerHTML=""; var tr=ta.insertRow(0); var cell0=tr.insertCell(0); cell0.innerHTML="编号"; var cell1=tr.insertCell(1); cell1.innerHTML="名称"; var cell2=tr.insertCell(2); cell2.innerHTML="价格"; var cell3=tr.insertCell(3); cell3.innerHTML="位置"; var cell4=tr.insertCell(4); cell4.innerHTML="描述"; //插入新的行 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.price; var cell3=tr.insertCell(3); cell3.innerHTML=u.loc; var cell4=tr.insertCell(4); cell4.innerHTML=u.desc; } } } //发送请求 ajax.open("get","user?name="+name); ajax.send(null); } </script> </head> <body> <h3>欢迎访问英雄商店</h3> <hr> 英雄名称：<input type="text" name="uname" value="" id="uname"/> <input type="button" value="搜索" onclick="getData2()"> <hr> <table border="1px" id="ta"> </table> </body> </html>
在UserServlet中：
1 public class UserServlet extends HttpServlet{ 2 @Override 3 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 4 //设置请求编码格式 5 req.setCharacterEncoding("utf-8"); 6 //设置响应编码格式 7 resp.setCharacterEncoding("utf-8"); 8 resp.setContentType("text/xml;charset=utf-8"); 9 //获取请求信息 10 String name=req.getParameter("name"); 11 System.out.println("用户请求信息为："+name); 12 //处理请求信息 13 //获取业务层对象 14 UserSrevice us=new UserSeviceImp(); 15 //处理业务 16 User u=us.getUserInfoService(name); 17 System.out.println("查询结果为:"+u); 18 //响应处理结果 19 //resp.getWriter().write("{name:‘"+u.getUname()+"‘,pwd:‘"+u.getPwd()+"‘}"); 20 resp.getWriter().write(new Gson().toJson(u)); 21 } 22 }
在servlet中响应结果返回中：
resp.getWriter().write("{name:‘"+u.getUname()+"‘,pwd:‘"+u.getPwd()+"‘}");
此方式拼接字符串太麻烦，推荐安装jar包：gson-2.2.4.jar
resp.getWriter().write(new Gson().toJson(u));
XML数据格式获取响应内容
responseXML：返回document对象
通过document对象将数据从xml中获取出来
<%@ 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"> function getXML(){ //创建ajax引擎对象 var ajax; if(window.XMLHttpRequest){//火狐 ajax=new XMLHttpRequest(); }else if(window.ActiveXObject){//ie ajax=new ActiveXObject("Msxml2.XMLHTTP"); } //复写onreadystatechange ajax.onreadystatechange=function(){ //判断Ajax状态吗 if(ajax.readyState==4){ //判断响应状态吗 if(ajax.status==200){ //获取响应内容 var doc=ajax.responseXML; //处理响应内容 //获取元素对象 alert(doc.getElementsByTagName("name")[0].innerHTML); } } } //发送请求 ajax.open("get","xml.jsp",true); ajax.send(null); } </script> </head> <body> <h3>XML数据格式学习</h3> <hr> <input type="button" value="测试XML" onclick="getXML()" /> </body> </html>
在xml.jsp中：
<%@ page language="java" contentType="text/xml; charset=utf-8"%> <user> <name>李四</name> <pwd>123</pwd> </user>
相当于在Servlet中响应xml格式信息：
//响应处理结果
resp.getWriter().write("<user><uid>1</uid><name>张三</name><price>11.11</price></user>");
以上是关于ajax的主要内容，如果未能解决你的问题，请参考以下文章