锋利的qjuey-ajax

jquery 中的ajax

load方法主要获取web服务器上静态数据

1 load方法载入HTML文档

load(url [,data] [,callback])
$(function(){
  $("#send").click(function(){
  $("#resText").load("test.html")
  })
})

2 筛选载入的HTML文档

$("#resText").load("test.html .para")

载入页面class为“para”的内容

3 传递方式

无参数传递,使用GET方式

$("#resText").load("test.php",function(){})

有参数传递,使用POST方式

$("#resText").load("test.php" , {name:"rain",age:"22"},function(){})

4 回调参数

  load()方法回调函数,该函数有三个参数,

  

function(responseText,textStatus,XMLHttpRequest){
    responseText 请求返回内容
    textStatus 请求返回状态 :success,error ,notmodified , timeout
    XMLHttpRequest 对象
  }

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

  在项目中如果要传递一些参数给服务器,可以使用$.get(),$.post()和 $.ajax方法

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

  type 服务器返回的内容的格式,包括xml ,html ,script ,json ,text ,_default

  2 回调函数function(data,testStatus){}

6数据格式

  HTML片段

  不需要处理,可直接插入页面中

  XML文档

  可以使用强大的DOM处理能力,对XML进行处理

  JSON文件

  在回调函数中指明文件类型为json后

  data是作为一个对象参数传入回调函数,可以直接使用

  var name=data.userName

$.post()

  因为jquery对js的封装,只需要改变jquery函数为$.post()就可以实行GET和POST的切换

  load()方法带有参数传递时,同样会使用post方式发送请求。因此也可以使用load()方法完成同样的功能。

$.getScript() 和 $.getJson()

  在事件函数中加载js和json文件

  $().each() 和$.each()方法

  $().each(callback)方法以匹配的元素为对象,每次执行传递的函数时,改变函数中的this对象指向一个不同的DOM元素。

  $.each(object[,callback])

  此方法可以用于遍历任何对象。

  $.each([0,1,2]function(){})

  object可以为对象和数组,

7$.ajax()

  该方法为jquery最底层的实现,可以替代前面所有的方法;

8 序列化元素

  $("#form").serialize()方法

  可以对该表单下的数据进行序列化。

  $.param(obj)

  用来对一个数组或者对象按照key/value进行序列化

9 ajax全局事件

  可以为元素注册ajax全局事件,当页面触发ajax时触发,如果再调用ajax方法时不触发全局事件,则在$.ajax()中设置global:false

  $("#id").ajaxStart(function(){}).ajaxStop(function(){});

  全局事件方法

  ajaxComplete(callback)

  ajaxError(callback)

  ajaxSend(callback)

  ajaxSuccess(callback)

时间: 2024-10-19 18:44:46

锋利的qjuey-ajax的相关文章

锋利的JQuery —— Ajax

大图猛戳

锋利jQuery 学习整理之 第六章 jQuery 与Ajax 的应用

1.Ajax 的XMLHttpRequest 对象 XMLHttpRequest 是Ajax 的核心,它是Ajax 实现的关键---发送异步请求.接受响应及执行回调都是通过它来完成的.XMLHttpRequest最早是在Microsoft Internet Explorer  5.0  ActiveX 组件中被引用的. 2.JQuery 中的Ajax jQuery 对Ajax 进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第二层是load().$.load()和$.post(

【学习笔记】锋利的jQuery(四)AJAX

一.load()方法 /* *如果没有参数传递,采用GET方式传递 *如果有参数,则自动转换成POST方式传递 *无论Ajax是否请求成功,请求完成后回调函数触发 */ load("test.html") load("test.html .para") //加载html里中有para类的DOM load("test.php",{name:"rain",age:"22"},function(responseT

锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">&l

6 《锋利的jQuery》Ajax的应用

Ajax的优势 1.不需要插件支持 2.优秀的用户体验 3.提高web程序的性能(传输数据的方式,按需发送) 4.减轻服务器和带宽的负担 Ajax的不足 1.浏览器对XMLHttpRequest对象支持度不足 2.破坏浏览器前进.“后退”的正常功能 3.对搜索引擎的支持不足 4.开发和调试工具的缺乏 Ajax的核心是XMLHttpRequest对象,它是通过Ajax实现的关键——发送异步请求.接收响应及执行回调都是通过它来完成的. $(function () { var xmlHttpReq =

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

最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例敲结果并不会执行. 在查阅资料后,发现原来在jquery1.9+版本以后,ajax全局事件需绑定到document对象上才能触发. 下面是各版本不同写法: <html> <head> <meta charset="utf-8"> <style>

jquery学习(三)-ajax

来自锋利的jquery第二版 1.Ajax的优势和不足 1.优势 A.不需要插件支持:不需要任何浏览器插件,且大多数主流浏览器支持: B.优秀的用户体验:实现局部刷新,使得web应用能够迅速的回应用户操作: C.提高web程序性能:在传统模式中数据交换时通过from表达实现,而数据获取靠的是全页面刷新来获取正页内容,效率非常低.而Ajax模式通过XMLHttpRequest对象向服务器提交希望提交的数据,实现按需发送和加载. D.减轻服务器和带宽负担:Ajax工作原理相当与早用户和服务器之间加了

《锋利的jquery》源码整理——jquery技巧上

        在看<锋利的jquery>这本书的时候,书末尾总结了jquery的一些用法技巧,感觉很实用,先收藏着以后用到,可以借鉴看看.   一,资源(在w3cfuns资源中可以找到第一版和第二版)          <锋利的jquery>: http://pan.baidu.com/share/link?shareid=1725756399&uk=4245516461(PDF)                                        http:/

锋利的jQuery-7--query ui效果库--拖动排序插件sortable

一个简单的拖动排序效果,具体请参看jQuery ui官网demo. jquery ui :http://jqueryui.com/ sortable例子:http://jqueryui.com/sortable/#portlets 效果如图: html代码: <style type="text/css"> #myList{width: 80px;background: #EEE;padding: 5px;list-style: none;} #myList a{text-d

滑轮滚动到页面底部ajax加载数据

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧 当然本例子采用的是jquery库,后期会做成原生js.本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height(): 再给windo