javaweb之AJAX⽤法
AJAX ：Asynchronous JavaScript And XML
指异步 JavaScript 及 XML⼀种⽇渐流⾏的Web编程⽅式
Better
Faster
User-Friendly
不是⼀种新的编程语⾔，⽽是⼀种⽤于创建更好更快以及交互性更强的 Web 应⽤程序的技术，是基于JavaScript、XML、HTML、CSS新⽤法。
呈上AJAX之⽗ Jesse James Garrett ⼤佬帅照， emmm 很有魔性的笑容~
AJAX交互模型
AJAX编码步骤
1、创建XmlHttpRequest对象
2、注册状态监控回调函数
3、建⽴与服务器的异步连接
4、发出异步请求
如下是⼀个搜索框提⽰的JavaScript函数写法
load = function(){
2//得到搜索框对象
3var searchElement = ElementById("name");
4var div = ElementById("context1");
5 keyup = function(){
6//给⽂本框注册事件
7var name = this.value;
8if(name==""){
9 div.style.display="none";
10return;
11 }
12var xhr = getXMLHttpRequest(); //1 执⾏顺序：1
13 adystatechange = function(){ //2 执⾏顺序：4
adyState == 4){
15if(xhr.status == 200){
16var str = sponseText;
17var ss = str.split(",");
18var childDivs = "";
19for ( var i = 0; i < ss.length; i++) {
20 childDivs+="<div onmouseover='changeBackground_over(this)' onmouseout='changeBackground_out(this)' onclick='writeText(this)'>"+ss[i]+"</div>";
21 }
22 div.innerHTML=childDivs;
23 div.style.display="block";
24 }
25 }
26 }//time 防⽌IE浏览器缓存问题
27 xhr.open("get","${tPath}/servlet/searchBookAJAXServlet?name="+name+"&time="+new Date().getTime());//3 执⾏顺序：2
28 xhr.send(null); //4 执⾏顺序：3
29 }
30 }
31 function changeBackground_over(div){
32 div.style.backgroundColor = "gray";
33 }
34 function changeBackground_out(div){
35 div.style.backgroundColor = "";
36 }
37 function writeText(div){
38var searchElement = ElementById("name");
39 searchElement.value = div.innerHTML;
40 div.parentNode.style.display="none";
41 }
//-------------------------------下⾯是搜索框代码
<div id="context1" ></div>
//-------------------------------下⾯是引⼊js
<script type="text/javascript" src="${tPath}/js/my.js">
对应调⽤的是⼀个SearchBookAJAXServlet，这⾥可以⾃⼰进⾏数据的封装，也可以直接调⽤json，json的使⽤很简单，String str = JSONArray.fromObject(list).toString()；即可。
1import java.io.IOException;
2import java.util.List;
3
4import javax.servlet.ServletException;
5import javax.servlet.http.HttpServlet;
6import javax.servlet.http.HttpServletRequest;
7import javax.servlet.http.HttpServletResponse;
8
9import net.sf.json.JSON;
10import net.sf.json.JSONArray;
11
12import com.itheima.domain.Book;
13import com.itheima.service.BookServiceImpl;
14
15public class SearchBookAJAXServlet extends HttpServlet {
16
17public void doGet(HttpServletRequest request, HttpServletResponse response)
18throws ServletException, IOException {
19 response.setContentType("text/html;charset=UTF-8");
20 response.setCharacterEncoding("UTF-8");
21 String name = Parameter("name");
22
23 name = new Bytes("GBK"),"UTF-8");
24 System.out.println(name);
25
26 BookServiceImpl bsi = new BookServiceImpl();
27 List<Object> list = bsi.searchBookByName(name);
28//把集合中的数据转换为字符串返回到⽹页
29/*String str="[";
30 for (int i = 0; i < list.size(); i++) {
31 if(i>0){
32 str+=",";
33 }
34 str+="\""+(i)+"\"";
35 }
36 str+="]";*/
37 //创建json对象
38 String str = JSONArray.fromObject(list).toString();
39 System.out.println(str);
40//把数据直接响应到客户端
41 Writer().write(str);
42//request.setAttribute("str", str);
43//RequestDispatcher("/login.jsp").forward(request, response);
44 }
45
46public void doPost(HttpServletRequest request, HttpServletResponse response)
47throws ServletException, IOException {
48
49this.doGet(request, response);
50 }
51
52 }
创建XMLHttpRequest对象时，不同浏览器提供不同的⽀持
1//获取XMLHttpRequest对象
2function getXMLHttpRequest() {
3var xmlhttp;
4if (window.XMLHttpRequest) {// code for all new browsers
发送ajax请求的步骤5 xmlhttp = new XMLHttpRequest();
6 } else if (window.ActiveXObject) {// code for IE5 and IE6
7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
8 }
9return xmlhttp;
10 }
XMLHttpRequest 属性
readyState：类型short；只读
responseText：类型String；只读
responseXML：类型Document；只读
status：类型short；只读
⽅法：
1. open()
2. send()
3. setRequestHeader()
4. 事件处理器 onreadystatechange
将状态触发器绑定到⼀个函数
1. var xmlHttp;
2. createXMLHttpRequest()
3. adystatechange = processor; 这⾥的processor是回调函数的⽅法名
4. function processor (){… …}
使⽤open⽅法建⽴连接
open(method,url, asynch)
其中method表⽰HTTP调⽤⽅法，⼀般使⽤"GET"，"POST"
url表⽰调⽤的服务器的地址
asynch表⽰是否采⽤异步⽅式，true表⽰异步，⼀般这个参数不写
范例代码
xmlHttp.open("POST", "url");
xmlHttp.open("GET", "url?name=xxx&pwd=xxx");
向服务器端发送数据
1. GET⽅式提交数据在URL上 xmlHttp.send(null);
2. POST⽅式提交
xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
xmlHttp.send("name=xxx&pwd=xxx");
在回调函数中对数据进⾏处理
function 回调函数(){
adyState == 4) { //如果响应完成 if(xmlHttp.status == 200) {//如果返回成功 …
}
}
}
常⽤的服务器返回数据格式
HTML⽚段
JSON格式的数据
XML格式的数据
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论