按照ajax之父jesse j,java web 之 AJAX用法

AJAX :Asynchronous JavaScript And XML

指异步 JavaScript 及 XML一种日渐流行的Web编程方式

Better

Faster

User-Friendly

不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术,是基于JavaScript、XML、HTML、CSS新用法。

0d3f3ffb2b79f3e3079b86ecc80d7d02.png呈上AJAX之父 Jesse James Garrett 大佬帅照, emmm 很有魔性的笑容~

AJAX交互模型

df03965f6fc483ab0058878f065cd5e4.png

87413b83917b6fde87308176e59b6ede.png

AJAX编码步骤

1、创建XmlHttpRequest对象

2、注册状态监控回调函数

3、建立与服务器的异步连接

4、发出异步请求

如下是一个搜索框提示的JavaScript函数写法

1 window.onload =function(){2 //得到搜索框对象

3 var searchElement = document.getElementById("name");4 var div = document.getElementById("context1");5 searchElement.onkeyup =function(){6 //给文本框注册事件

7 var name = this.value;8 if(name==""){9 div.style.display="none";10 return;11 }12 var xhr =getXMLHttpRequest();            //1 执行顺序:113 xhr.onreadystatechange =function(){         //2 执行顺序:414 if(xhr.readyState == 4){15 if(xhr.status == 200){16 var str =xhr.responseText;17 var ss = str.split(",");18 var childDivs = "";19 for ( var i = 0; i < ss.length; i++) {20 childDivs+="

"+ss[i]+"
";21 }22 div.innerHTML=childDivs;23 div.style.display="block";24 }25 }26 }//time 防止IE浏览器缓存问题27 xhr.open("get","${pageContext.request.contextPath}/servlet/searchBookAJAXServlet?name="+name+"&time="+newDate().getTime());//3 执行顺序:228 xhr.send(null);                     //4    执行顺序:329 }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){38 var searchElement = document.getElementById("name");39 searchElement.value =div.innerHTML;40 div.parentNode.style.display="none";41 }

//-------------------------------下面是搜索框代码

//-------------------------------下面是引入js

对应调用的是一个SearchBookAJAXServlet,这里可以自己进行数据的封装,也可以直接调用json,json的使用很简单,String str =JSONArray.fromObject(list).toString();即可。

1 importjava.io.IOException;2 importjava.util.List;3

4 importjavax.servlet.ServletException;5 importjavax.servlet.http.HttpServlet;6 importjavax.servlet.http.HttpServletRequest;7 importjavax.servlet.http.HttpServletResponse;8

9 importnet.sf.json.JSON;10 importnet.sf.json.JSONArray;11

12 importcom.itheima.domain.Book;13 importcom.itheima.service.BookServiceImpl;14

15 public class SearchBookAJAXServlet extendsHttpServlet {16

17 public voiddoGet(HttpServletRequest request, HttpServletResponse response)18 throwsServletException, IOException {19 response.setContentType("text/html;charset=UTF-8");20 response.setCharacterEncoding("UTF-8");21 String name = request.getParameter("name");22

23 name = new String(name.getBytes("GBK"),"UTF-8");24 System.out.println(name);25

26 BookServiceImpl bsi = newBookServiceImpl();27 List 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+="\""+list.get(i)+"\"";35 }36 str+="]";*/

37 //创建json对象

38 String str =JSONArray.fromObject(list).toString();39 System.out.println(str);40 //把数据直接响应到客户端

41 response.getWriter().write(str);42 //request.setAttribute("str", str);43 //request.getRequestDispatcher("/login.jsp").forward(request, response);

44 }45

46 public voiddoPost(HttpServletRequest request, HttpServletResponse response)47 throwsServletException, IOException {48

49 this.doGet(request, response);50 }51

52 }

创建XMLHttpRequest对象时,不同浏览器提供不同的支持

1 //获取XMLHttpRequest对象

2 functiongetXMLHttpRequest() {3 varxmlhttp;4 if (window.XMLHttpRequest) {//code for all new browsers

5 xmlhttp = newXMLHttpRequest();6 } else if (window.ActiveXObject) {//code for IE5 and IE6

7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");8 }9 returnxmlhttp;10 }

XMLHttpRequest 属性

readyState:类型short;只读

responseText:类型String;只读

responseXML:类型Document;只读

status:类型short;只读

方法:

open()

send()

setRequestHeader()

事件处理器  onreadystatechange

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

var xmlHttp;

createXMLHttpRequest()

xmlHttp.onreadystatechange = processor;  这里的processor是回调函数的方法名

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");

向服务器端发送数据

GET方式提交   数据在URL上         xmlHttp.send(null);

POST方式提交

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

xmlHttp.send("name=xxx&pwd=xxx");

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

function 回调函数(){

if(xmlHttp.readyState == 4) { //如果响应完成

if(xmlHttp.status == 200) {//如果返回成功

}

}

}

常用的服务器返回数据格式

HTML片段

JSON格式的数据

XML格式的数据

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值