jQuery学习笔记之jQuery的Ajax（3）

6.jQuery的Ajax插件

源码地址：

https://github.com/iyun/jQueryDemo.git

————————————————————————————

6.0 jQuery ajax

浏览器给我们提供的XMLHttpRequest的作用是来发送http请求。

js代码发送一个http的请求

XMLHttpRequest的四步：创建对象、注册监听、建立连接、发送数据

异步交互的6个方法（发送http请求）

ajax();(最底层)

get(),post(),load();（底层）

getScript(),getJSON;（上层）

$.get() (或$.post()) 方法
1、`$.get()` 方法使用 GET 方式来进行异步请求. 它的结构是: `$.get(url[, data][, callback][, type]);`

2、$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.

3、方法的返回值:XMLHttpRequest对象

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

load()方法

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

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

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

4、传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式

5、对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4 种)和 XMLHttpRequest 对象

6、方法的返回值是 jQuery

7、如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)

$.getScript()方法

1、有时候，在页面初次加载时就取得所需的全部的javascript文件是完全没有必要的。虽然我们可以在需要时，动态创建

 <body>

     <br/>

     <p>

         <input type="button" id="send" value="加载"/>

     </p>

    <div  class="comment">已有评论：</div>

     <div id="resText" >

     </div>

  </body>

  <script language="JavaScript">

   $(function(){

        $('#send').click(function() {

             $.getScript('test.js',function(){

                $('#resText').html(html);

             });

        });

   })

  </script>

$.getJSON()方法

 <body>

     <br/>

     <p>

         <input type="button" id="send" value="加载"/>

     </p>

    <div  class="comment">已有评论：</div>

     <div id="resText" >

     </div>

  </body>

  <script language="JavaScript">

   $(function(){

        $('#send').click(function() {

             $.getJSON('test.json', function(data) {

                 $('#resText').empty();

             var html = '';

             $.each( data  , function(commentIndex, comment) {

                 html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';

                  })

                 $('#resText').html(html);

            })

       })

   })

  </script>

序列化元素

1、在客户端与服务器端进行通信时，常常需要将客户端浏览器中的内容发送至服务器端进行处理。如果需要发送的内容较少时，处理比较方便。但在真实项目中，往往需要处理的数据内容很复杂。jQuery提供了相应的方法帮助开发者解决这个问题。

2、serialize()方法

该方法作用于一个jQuery对象，可以将DOM元素内容序列化为字符串。方便客户端发送请求。

3、serializeArray()方法

该方法作用于一个jQuery对象，可以将DOM元素内容序列化为JSON数据格式。

注：此方法返回的是JSON对象而非JSON字符串。

JQuery 加载并解析 XML

1、JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.

    $(function(){

        $.get("cities.xml",function(xml){

            alert(xml);

        });

    })
2、JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历

jQuery学习笔记之jQuery的Ajax（3）的更多相关文章

  1. jQuery 学习笔记：jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  2. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  3. Jquery学习笔记（10）--ajax删除用户，使用了js原生ajax

    主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: <!DOCTYPE html> <html lang=&quo ...

  4. JQuery学习笔记（4）——ajax

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML) 原生 例子 点击按钮,访问服务器上的ajax_info.txt文件,获得txt ...

  5. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  6. jQuery学习笔记（jquery.form插件）

    官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...

  7. jQuery学习笔记之jQuery.fn.init()的参数分析

    这篇文章主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下   从return new jQuery.fn.init( selector, context, rootjQuer ...

  8. jQuery学习笔记（jquery.ui插件）

    官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...

  9. jQuery学习笔记（jquery.simplemodal插件）

    官网地址:http://www.ericmmartin.com/ SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架.Simpl ...

随机推荐

  1. Spring MVC 笔记2 HelloWorld

    实现这个例子的问题 WEB-INFO目录下必须有spring的包,放在lib下:如下图(这里我直接把idea创建时宣称springmvc,然后把idea给的lib拷贝了下来,也可以的) request ...

  2. linux中的umask命令

    转载:http://blog.51cto.com/1123697506/882064 一 权限掩码umask umask是chmod配套的,总共为4位(gid/uid,属主,组权,其它用户的权限),不 ...

  3. ISNUMERIC()检测是否为数字

    ISNUMERIC ( expression )当输入表达式得数为一个有效的整数.浮点数.money 或 decimal 类型,那么 ISNUMERIC 返回 1:否则返回 0.返回值为 1 确保可以 ...

  4. Huawei-R&S-网络工程师实验笔记20190607-STP生成树协议（基本配置、桥优先级、根桥选举、根端口、路径开销、边缘端口）

    >Huawei-R&S-网络工程师实验笔记20190607-STP生成树协议(基本配置.桥优先级.根桥选举.根端口.路径开销.边缘端口) >>实验开始,先上拓扑图参考: &l ...

  5. 如何快速恢复SLAVE从库上某几张表

    在日常工作中,同步报错是DBA遇到最多的一个问题,如果修复后发现还没有解决,通常的办法是在master上重新导入一份备份,然后在slave上恢复,这个方案是针对整个库不是很大的情况,那么如果是数据库比 ...

  6. vjudge B - Design T-Shirt

    B - Design T-Shirt 思路:水题,模拟即可. #include<cstdio> #include<cstring> #include<iostream&g ...

  7. 网易杭研后台技术中心的博客 -MYSQL ：OOM

    http://backend.blog.163.com/blog/#m=0&t=3&c=mysql

  8. 使用Visual Studio Code调试Electron主进程

    1.打开VS Code,使用文件->打开,打开程序目录 2.切换到调试选项卡 3.打开launch.json配置文件 4.在“附加到进程”节点上增加localhost配置 5.使用命令行启动el ...

  9. Android LaunchAnyWhere (Google Bug 7699048)漏洞具体解释及防御措施

    開始 近日,Google修复一个组件安全的漏洞LaunchAnyWhere(Google Bug 7699048). 这个漏洞属于Intend Based提取漏洞,攻击者利用这个漏洞,能够突破了应用间 ...

  10. 使用Keras编写GAN的入门

    使用Keras编写GAN的入门 GAN Time: 2017-5-31 前言 代码 reference 前言 主要参考了网页[1]的教程,同时主要算法来自Ian J. Goodfellow 的论文,算 ...