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

Ajax第二天——大纲待更新

2024-09-23 12:28:17   218人阅读

　　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第二天——大纲待更新


联系
我们