首页 > 程序开发 > web前端 > JavaScript >

jQuery AJAX —开篇 $.load()

2014-01-16

前言 之前的一篇博客,对Ajax的理解Ajax核心对象 XMLHTTPRequest五步学会使用 ,对Ajax的作用和基本使用有了一些了解。 这里做一个简单总结,AJAX核心对象XMLHTTPRequest和服务器的交互过程

前言

之前的一篇博客,对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
        
    

前端显示

\


<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">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 文件


相关文章
最新文章
热点推荐