jQuery AJAX —开篇 $.load()

前言

    之前的一篇博客，对Ajax的理解Ajax核心对象 XMLHTTPRequest五步学会使用 ，对Ajax的作用和基本使用有了一些了解。

    这里做一个简单总结，AJAX核心对象XMLHTTPRequest和服务器的交互过程：

 

过程：初始化→发送请求→等待服务器响应→接收响应

　　1.创建XMLHTTPRequest对象

 

　　2.使用open()方法设置和服务器端交互的相应参数，包括发送HTTP请求的方式(get orpost) ，请求的URL，是否异步方式交互

　　3.使用send()方法发送HTTP请求

　　4.使用onreadystatechange事件监听服务端反馈，根据readyState属性判断和服务器端的交互是否完成，还要根据status属性判断服务器是否正确返回了数据，完成后接受服务器端返回的数据。

　　这个过程是原始的AJAX的实现过程，对初学者明白这个过程是很有必要的。其实这里有一个更简单的实现方法——jQuery。

 

jQuery AJAX方法

$.load()

 

以之前的一篇博客为例，这里用jQuery load() 方法来实现：（把远程数据加载到被选的元素中）

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title></title>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6.         <script type="text/javascript" src="jquery.js"></script>  
  7.         <script type="text/javascript">  
  8.             $(document).ready(function(){  
  9.                 $("#btn").click(function(){  
  10.                 //从文本框中获取内容  
  11.                 var userName = document.getElementById("UserName").value;  
  12.   
  13.                 //load()方法从服务器加载数据，并把返回的数据放入被选元素中。  
  14.                 //GET方式  
  15.                 $('#message').load("AJAX?name=" + userName);  
  16.                 //POST方式  
  17.                 //$('#message').load("AJAX?name=" + userName,{"Content-type":"application/x-www-form-urlencoded"});  
  18.                 });  
  19.               });  
  20.         </script>  
  21.     </head>  
  22.     <body>  
  23.         <input type="text" id="UserName" value="admin"/>  
  24.         <input type="button" id="btn" value="校验用户名"/>  
  25.         <br/>  
  26.         <div id="message"></div>  
  27.     </body>  
  28. </html>  

 

通过上例的实现，当我们引入jquery库后，一切变得好简单，只需要一行代码：

[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. //GET方式  
  2.   
  3. $('#message').load("AJAX?name="+ userName);  
  4.   
  5. //POST方式  
  6.   
  7. //$('#message').load("AJAX?name="+userName,{"Content-type":"application/x-www-form-urlencoded"});  

我们不需要再关心AJAX的请求和响应这些过程了。

 

    jQuery load()方法是jQuery中最简单但强大的AJAX方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。它的语法如下：

   $(selector).load(URL,data,callback);

 

说明：

　　  selector：存放返回的数据的元素，示例中的<div id="message"></div>

　　load的三个参数：

　　　URL(必须的)：这个不用说都知道，请求的URL地址；

　　　data(可选的)：发送至服务器的key/value 数据；

　　　callback(可选的)：请求完成后想要执行的函数（不管请求成功或者失败）。

 

附：服务端和XML代码

服务端

 

[java] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. //服务端  
  2. public class AJAX extends HttpServlet {  
  3.     //服务器端代码  
  4.     protected void processRequest(HttpServletRequest request, HttpServletResponse response)  
  5.             throws ServletException, IOException {  
  6.         response.setContentType("text/html;charset=UTF-8");  
  7.         PrintWriter out = response.getWriter();  
  8.         try {  
  9.             String old = request.getParameter("name");  
  10.             if (old == null) {  
  11.                 out.println("用户名不能为空");  
  12.             }else{  
  13.                 String name = new String(old.getBytes("ISO8859-1"),"gb2312");  
  14.                 //String name = URLDecoder.decode(old,"utf-8");  
  15.                 System.out.println(name);  
  16.                 if (name.equals("j")) {  
  17.                     out.println("用户名[" + name +"]已经存在，请使用其他用户名");  
  18.                 }else{  
  19.                     out.println("用户名[" + name +"]尚未存在，可以使用");  
  20.                 }  
  21.                 //out.println("<a href=\"classic.html\">返回校验页面</a>");  
  22.             }  
  23.               
  24.         } finally {  
  25.             out.close();  
  26.         }  
  27.     }  

XML

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">  
  3.     <servlet>  
  4.         <servlet-name>AJAX</servlet-name>  
  5.         <servlet-class>AJAX</servlet-class>  
  6.         <load-on-startup>1</load-on-startup>  
  7.     </servlet>  
  8. <servlet-mapping>  
  9.         <servlet-name>AJAX</servlet-name>  
  10.         <url-pattern>/AJAX</url-pattern>  
  11.     </servlet-mapping>  
  12. <session-config>  
  13.         <session-timeout>  
  14.             30  
  15.         </session-timeout>  
  16.     </session-config>  
  17. </web-app>  

 

前端显示

 

未完结...

 

    正如上面所说的，$.load()是jQuery中最简单的AJAX方法，之后带来其它的jQuery AJAX方法。

 

$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到XMLHttpRequest 对象中
$.get(url,data,callback,type)
$.post(url,data,callback,type)		 使用HTTP GET 来加载远程数据
$.getJSON(url,data,callback) 使用HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的JavaScript 文件
posted @ 2017-01-15 17:03  天涯海角路  阅读(215)  评论(0)    收藏  举报