java web 之 AJAX用法

2022-05-10 00:24:35

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函数写法

 window.onload = function(){

         //得到搜索框对象

         var searchElement = document.getElementById("name");

         var div = document.getElementById("context1");

         searchElement.onkeyup = function(){

             //给文本框注册事件

             var name = this.value;

             if(name==""){

                 div.style.display="none";

                 return;

             }

             var xhr = getXMLHttpRequest();　　　　　　　　　　　　//1    执行顺序：1

             xhr.onreadystatechange = function(){　　　　　　　　 //2    执行顺序：4

                 if(xhr.readyState == ){

                     if(xhr.status == ){

                         var str = xhr.responseText;

                         var ss = str.split(",");

                         var childDivs = "";

                         for ( var i = ; i < ss.length; i++) {

                             childDivs+="<div onmouseover='changeBackground_over(this)' onmouseout='changeBackground_out(this)' onclick='writeText(this)'>"+ss[i]+"</div>";

                         }

                         div.innerHTML=childDivs;

                         div.style.display="block";

                     }

                 }

             }//time 防止IE浏览器缓存问题

             xhr.open("get","${pageContext.request.contextPath}/servlet/searchBookAJAXServlet?name="+name+"&time="+new Date().getTime());//3 执行顺序：2

             xhr.send(null);　　　　　　　　　　　　　　　　　　　　　//4　　　　执行顺序：3

         }

     }

     function changeBackground_over(div){

             div.style.backgroundColor = "gray";

     }

     function changeBackground_out(div){

             div.style.backgroundColor = "";

     }

     function writeText(div){

         var searchElement = document.getElementById("name");

         searchElement.value = div.innerHTML;

         div.parentNode.style.display="none";

     }

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

<div id="context1" style="display:block;border:1px solid black;width: 128px; height:100px;position:absolute;left: 945px;top: 137px;"></div>

//-------------------------------下面是引入js
<script type="text/javascript" src="${pageContext.request.contextPath}/js/my.js">

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

 import java.io.IOException;

 import java.util.List;

 import javax.servlet.ServletException;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import net.sf.json.JSON;

 import net.sf.json.JSONArray;

 import com.itheima.domain.Book;

 import com.itheima.service.BookServiceImpl;

 public class SearchBookAJAXServlet extends HttpServlet {

     public void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         response.setContentType("text/html;charset=UTF-8");

         response.setCharacterEncoding("UTF-8");

         String name = request.getParameter("name");

         name = new String(name.getBytes("GBK"),"UTF-8");

         System.out.println(name);

         BookServiceImpl bsi = new BookServiceImpl();

         List<Object> list = bsi.searchBookByName(name);

         //把集合中的数据转换为字符串 返回到网页

         /*String str="[";

         for (int i = 0; i < list.size(); i++) {

             if(i>0){

                 str+=",";

             }

             str+="\""+list.get(i)+"\"";

         }

         str+="]";*/

         //创建json对象

         String str = JSONArray.fromObject(list).toString();

         System.out.println(str);

         //把数据直接响应到客户端

         response.getWriter().write(str);

         //request.setAttribute("str", str);

         //request.getRequestDispatcher("/login.jsp").forward(request, response);

     }

     public void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         this.doGet(request, response);

     }

 }

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

 //获取XMLHttpRequest对象

 function getXMLHttpRequest() {

     var xmlhttp;

     if (window.XMLHttpRequest) {// code for all new browsers

         xmlhttp = new XMLHttpRequest();

     } else if (window.ActiveXObject) {// code for IE5 and IE6

         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

     }

     return xmlhttp;

 }

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格式的数据

码农公寓

相关文章