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() 方法来实现：（把远程数据加载到被选的元素中）

    
        
        
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                //从文本框中获取内容
                var userName = document.getElementById("UserName").value;

                //load()方法从服务器加载数据，并把返回的数据放入被选元素中。
                //GET方式
                $('#message').load("AJAX?name=" + userName);
                //POST方式
                //$('#message').load("AJAX?name=" + userName,{"Content-type":"application/x-www-form-urlencoded"});
                });
              });
        </script>
    
    
        
        
        

    

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

　　//GET方式

　　$('#message').load("AJAX?name="+ userName);

　　//POST方式

　　//$('#message').load("AJAX?name="+userName,{"Content-type":"application/x-www-form-urlencoded"});

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

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

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

说明：

　　 selector：存放返回的数据的元素，示例中的

　　load的三个参数：

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

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

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

附：服务端和XML代码

服务端

//服务端
public class AJAX extends HttpServlet {
    //服务器端代码
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String old = request.getParameter("name");
            if (old == null) {
                out.println("用户名不能为空");
            }else{
                String name = new String(old.getBytes("ISO8859-1"),"gb2312");
                //String name = URLDecoder.decode(old,"utf-8");
                System.out.println(name);
                if (name.equals("j")) {
                    out.println("用户名[" + name +"]已经存在，请使用其他用户名");
                }else{
                    out.println("用户名[" + name +"]尚未存在，可以使用");
                }
                //out.println("返回校验页面");
            }
            
        } finally {
            out.close();
        }
    }

XML

    
        AJAX
        AJAX
        1
    

        AJAX
        /AJAX
    

        
            30
        
    

前端显示

vcD4KPGgxPs60zeq94S4uLjwvaDE+CjxwPjwvcD4KPHA+ICAgINX9yOfJz8Pmy/nLtbXEo6wkLmxvYWQoKcrHalF1ZXJ51tDX7rzytaW1xEFKQVi3vbeoo6zWrrrztPjAtMbky/y1xGpRdWVyeQogQUpBWLe9t6ihozwvcD4KPHA+Cjx0YWJsZSBhbGlnbj0="center" border="1" cellpadding="1" cellspacing="1" width="600"> $(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 文件