分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

《锋利的jQuery》第六章

发布时间:2023-09-06 01:08责任编辑:赖小花关键词:jQuery

1、Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据,即按需发送。

2、Ajax工作原理:相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。在客户端创建Ajax引擎,把传统方式下的服务器端负担的工作转移到客户端,便于客户端资源来处理,减轻服务器和贷款的负担。

3、通过传统的Javascript的Ajax方式从服务器端取回一个“Hello Ajax”的字符串并显示在页面上。

<script type="text/javascript"> ??????// window.onload = function(){ ??????function Ajax(){ ??????????var xmlHttpReq = null; ??????????//给xmlHttpReq对象赋值 ??????????if(window.ActiveXObject){ ??//IE5 IE6是以ActiveXObject来引入XMLHttpRequest对象的 ??????????????xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); ??????????}else if(window.XMLHttpRequest){ ???//除IE5 IE6的浏览器,XMLHttpRequest是window的子对象 ??????????????xmlHttpReq = new XMLHttpRequest(); ?//实例化一个XMLHttpRequest对象 ??????????} ??????????xmlHttpReq.open("GET","test.html",true); ???//用open方法初始化XMLHttpRequest对象 ??????????//回调事件处理器当它的readyState值改变时调用。当readyState值改变时会激发一个readyStateChange事件,可以使用onreadystatechange属性来注册该回调事件处理器 ??????????xmlHttpReq.onreadystatechange = RequestCallBack; ???//设置回调函数 ??????????function RequestCallBack(){ ????//一旦readyState的值改变,将会调用该函数 ??????????????if(xmlHttpReq.readyState == 4){ ??????????????????if(xmlHttpReq.status == 200){ ??????????????????????document.getElementById("tesText").innerHTML = xmlHttpReq.responseText; ??????????????????} ??????????????} ??????????} ??????????xmlHttpReq.send(null); ??????} ????// ??}; ???</script></head><body> ???<input type="button" value="ajax提交" onclick="Ajax()" /> ???<div id="tesText"></div></body>

4、jQuery对Ajax进行封装,重点介绍第二层。

                                                                              

5、load() 方法:

load( url [, data] [, callback] )
参数名称类型说明
urlString请求HTML页面的url地址
dataObject发送至服务器的key/value数据
callbackFunction请求完成时的回调函数,无论请求成功或失败

回调函数 callback有3个参数,

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

 6、$.get()方法

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

7、$.getScript() 方法

$.getScript(url , callback)
参数名称类型说明
urlString请求的script的url地址
callback(可选)Function载入成功后的回调函数

8、$.getScript() 方法

$.getJSON(url,callback)

9、$.each()是一个全局函数,可以遍历对象和数组。

$.each(一个数组或者对象 , 一个回调函数)

10、serialize() 方法,能够将DOM元素序列化为字符串,用于Ajax请求。

11、serializeArray(),将DOM元素序列化后,返回JSON格式的数据。

12、$.param() 方法,用来对一个数组或对象按照key/value进行序列化。

《锋利的jQuery》第六章

原文地址:http://www.cnblogs.com/qducn/p/7466661.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved