首页 > 代码库 > Ajax第二天——大纲待更新

Ajax第二天——大纲待更新

  JQuery中的Ajax

      jQuery 对 Ajax 操作进行了封装,

    在 jQuery 中最底层的方法是 $.ajax(),

    第二层是 load(), $.get() 和 $.post(), (常用)

    第三层是 $.getScript() 和 $.getJSON()

  更详尽的介绍请参见API

  什么是回调函数:

  这里先引用知乎网友对回调的生动形容,后续概念不再赘述回调函数概念

    你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,
    过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货。
    在这个例子里,你的电话号码就叫回调函数,
    你把电话留给店员就叫登记回调函数,
    店里后来有货了叫做触发了回调关联的事件,
    店员给你打电话叫做调用回调函数,
    你到店里去取货叫做响应回调事件。
  链接:https://www.zhihu.com/question/19801131/answer/13005983
  相对正式专业的回答参见:http://www.jb51.net/article/54750.htm
    load()方法

    load() 方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中.

 

    它的结构是: load(url[, data][,callback]) 

技术分享

    程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可

  testload.jsp
技术分享
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP ‘index.jsp‘ starting page</title>
    <script type="text/javascript" src="http://www.mamicode.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("a").click(function(){
            //使用load方法处理ajax
            var url=this.href;
            var args={"time":new Date()};
            $("#content").load(url,args);
            return false;
            });
    });
    </script>
  </head>
  
  <body>
    <a href="http://www.mamicode.com/helloAjax.txt">hello ajax</a>
    <div id="content"></div>
  </body>
</html>
View Code

  任何一个HTML结点都可以使用load()方法来加载ajax,结点直接插入到html中

   $.get() 和 $.post()方法 

    $.get() 方法使用 GET 方式来进行异步请求.

    它的结构是: $.get(url[, data][, callback][, type]);

技术分享

    $.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等;

    textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.

    $.get() 和 $.post() 方法时 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法

    两个方法类同,不再赘述
技术分享
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP ‘index.jsp‘ starting page</title>
  <script type="text/javascript" src="http://www.mamicode.com/jquery-3.1.1.min.js"></script>
  <script type="text/javascript">
      $(function(){
        $("a").click(function(){
            var url=this.href;
            var args={"time":new Date()};
            $.get(url,args,function(data){
                var name=$(data).find("name").text();
                var email=$(data).find("email").text();
                var website=$(data).find("website").text();
                $("#details").empty()
                        .append("<h2><a href=‘mailto:"+email+"‘>"+name+"</a></h2>")
                        .append("<a href=http://www.mamicode.com/‘"+website+"‘>"+website+"</a>");
                });
            return false;

        });
      })          
  </script>
  </head>
  
  <body>
    <h1>People</h1>
    <ul>
        <li><a href="http://www.mamicode.com/files/andy.xml">Andy</a></li>
           <li><a href="http://www.mamicode.com/files/richard.xml">Richard</a></li>
           <li><a href="http://www.mamicode.com/files/jeremy.xml">Jeremy</a></li>
    </ul>
    <div id="details"></div>
  </body>
</html>
View Code

  //其中的function是回调函数,当响应结束时,回调函数被触发,响应结果在data中

  testgetJSON 测试JSON数据格式 
技术分享
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP ‘index.jsp‘ starting page</title>
<script type="text/javascript" src="http://www.mamicode.com/scripts/jquery-1.4.2.js"></script>
  <script type="text/javascript">
  //url:ajax请求的目标url
  //args:传递的参数:json类型
  //data:ajax响应成功后的数据,可能是xml,html,json
      $(function(){
        $("a").click(function(){
            var url=this.href;
            var args={"time":new Date()};
            $.getJSON(url,args,function(data){
                var name=data.person.name;
                var email=data.person.eamil;
                var website=data.person.website;
                $("#details").empty()
                        .append("<h2><a href=‘mailto:"+email+"‘>"+name+"</a></h2>")
                        .append("<a href=http://www.mamicode.com/‘"+website+"‘>"+website+"</a>");
                });
            return false;

        });
      })          
  </script>
  </head>
  
  <body>
    <h1>People</h1>
    <ul>
        <li><a href="http://www.mamicode.com/files/andy.js">Andy</a></li>
           <li><a href="http://www.mamicode.com/files/richard.js">Richard</a></li>
           <li><a href="http://www.mamicode.com/files/jeremy.js">Jeremy</a></li>
    </ul>
    <div id="details"></div>
  </body>
</html>
View Code

   //其中的getJSON也可以简写为get,在get()最后一个参数使用type参数“JSON”



 

Ajax第二天——大纲待更新