6 《锋利的jQuery》Ajax的应用(略。)

时间:2022-09-13 22:44:33

Ajax的优势

1、不需要插件支持

2、优秀的用户体验

3、提高web程序的性能(传输数据的方式,按需发送)

4、减轻服务器和带宽的负担

Ajax的不足

1、浏览器对XMLHttpRequest对象支持度不足

2、破坏浏览器前进、“后退”的正常功能

3、对搜索引擎的支持不足

4、开发和调试工具的缺乏

Ajax的核心是XMLHttpRequest对象,它是通过Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。

    $(function () {
var xmlHttpReq = null;
// 创建对象
// IE5,6是以ActiveXObject方式引入XMLHttpRequest
if (window.ActiveXObject) {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
// 其他浏览器XMLHttpRequest是window的子对象
else if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();
}
xmlHttpReq.open("GET", "data.txt", true);
xmlHttpReq.onreadystatechange = RequestCallBack; //当readyState值改变时,会激发onreadystatechange事件,
//使用该属性来注册回调事件处理器
xmlHttpReq.send(null); //发送请求
function RequestCallBack() {
if (xmlHttpReq.readyState == 4) { //请求完成加载
if (xmlHttpReq.status == 200) { //响应已经成功
$("#mes").html(xmlHttpReq.responseText);
}
}
}
});

jquery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()、$.post()方法,第3层是$.getScritp()和$.getJSON()方法。

1、load()方法

load(url  [,data]  [,callback])

a、载入HTML文档 :$("#resText").load("test.html");

b、筛选载入的HTML文档:$("#resText").load("test.html .para");

c、传递方式:如果没有参数则采用GET方式传递,反之,则会自动转换为POST方式

d、回调参数:该回调函数有三个参数,分别是

        $("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
// responseText: 请求返回的内容
// textStatus: 请求状态:success、error、notmodified、timeout四种
// XMLHttpRequest: XMLHttpRequest对象
})

tip:在load()方法中无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数就被触发

2、$get()和$pos()方法

load()方法通常用来从web服务器上获取静态的数据文件,而$get()或者$post()是传参数给服务器中的页面。

$get()和$pos()方法是jquery中的全局函数,而在此之前的jquery方法都是对jquery对象进行操作的。

$.get(url [,data] [,callback] [,type])

参数名称 类型 说明
url String 请求的HTML页的地址
data(可选) Object 发送至服务器的key/value数据会作为QueryString附加到请求URL中
callback(可选) Function   载入成功时回调函数(当为success)自动将请求结果和状态传递给该方法
type(可选) String 服务器返回内容的格式,包括xml,html,script,json,text和_default

回调函数跟load()方法不同的是,只有当数据成功返回(success)后才被调用。

function(data,textStatus){
//data 返回的内容,可以是XML文档,JSON文件,HTML片段等
//textStatus 请求状态:success,error,notmodified,timeout 四种
}

6 《锋利的jQuery》Ajax的应用(略。)的更多相关文章

  1. 锋利的JQuery —— Ajax

    大图猛戳

  2. 锋利的jQuery学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  3. 【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行

    最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例 ...

  4. 锋利的jQuery(第二版)学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...

  5. WCF入门教程(四)通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF,采用System&period;ServiceModel&period;WebHttpBinding System&period;ServiceModel&period;WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一&lbrack;什么是WCF&rsqb;

    WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...

  6. 《锋利的jQuery》学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  7. IE8&sol;9 JQuery&period;Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  8. jquery ajax解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  9. jQuery&period;ajax 根据不同的Content-Type做出不同的响应

    使用H5+ASP.NET General Handler开发项目,使用ajax进行前后端的通讯.有一个场景需求是根据服务器返回的不同数据类型,前端进行不同的响应,这里记录下如何使用$.ajax实现该需 ...

  10. jQuery&period;ajax&lpar;url&comma;&lbrack;settings&rsqb;&rpar;

    概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. ...

随机推荐

  1. PHPer不能不看的50个细节&excl;

    1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数&quo ...

  2. 另一个 OleDbParameterCollection 中已包含 OleDbParameter 错误分析及解决办法

    程序非常简单,就是从一个表中取出一个符合要求的数据,如果取到,就把该数据对应的计数加1.也就是执行不同的两个SQL语句操作同一个表,并且这两个SQL的参数是一样的.在一个函数里完成这个调用.执行第二个 ...

  3. 利用name或id属性设置页面跳转的锚点

    理论准备         网页中的链接按照链接路径的不同,可以分为3种类型,分别是内部类型.锚点链接和外部链接:         按照使用对象的不同,网页中的链接又分为文本超链接,图像超链接,E-ma ...

  4. JS设置cookie,删除cookie

    js设置cookie有很多种方法. 第一种:(这个是w3c官网的代码) <script> //设置cookie function setCookie(cname, cvalue, exda ...

  5. android命令安装apk时报错:INSTALL&lowbar;FAILED&lowbar;CPU&lowbar;ABI&lowbar;INCOMPATIBLE

    点击下载Genymotion-ARM-Translation.zip 将你的虚拟器运行起来,将下载好的zip包用鼠标拖到虚拟机窗口中,出现确认对跨框点OK就行.然后重启你的虚拟机.

  6. 【C&sol;C&plus;&plus;多线程编程之四】终止pthread线程

    多线程编程之终止pthread线程       Pthread是 POSIX threads 的简称,是POSIX的线程标准.           终止线程似乎是多线程编程的最后一步,但绝不是本系列教 ...

  7. Python使用Selenium&sol;PhantomJS

    安装selenium: 1 pip install selenium 安装PhantomJS: 1 2 3 4 https://bitbucket.org/ariya/phantomjs/downlo ...

  8. 前端之旅HTML与CSS篇之a便签中放入其他块元素会撑大高度的原因

    原因:a元素下有一个匿名文本,这个文本外有一个匿名行级盒子,它有的默认vertical-align是baseline的,而且往往因为上文line-height的影响,使它有个line-height,从 ...

  9. 关于esp32的省电模式的WiFi连接

    对于ESP32,其作为一款集成了2.4GHz WiFi和蓝牙双模块的单芯片,所有基于wifi和蓝牙开发是学习esp32的重要一环,今天WiFi原理和网络结构 可以点击链接进行详细的了解,这里就不做详细 ...

  10. NET Core微服务之路:简单谈谈对ELK,Splunk,Exceptionless统一日志收集中心的心得体会

    前言 日志,一直以来都是开发人员和运维人员最关心的问题.开发人员可通过日志记录来协助问题定位,运维人员可通过日志发现系统隐患,故障等定位问题.如果你的系统中没有日志,就像一个断了线的风筝,你永远不知道 ...