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

通过上例的实现，当我们引入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
        
    

前端显示

未完结...

    正如上面所说的，$.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 文件