第六章jQuery中的Ajax应用

               第六章 jQuery中的Ajax应用

梅州网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。成都创新互联从2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

1.Ajax:客户端javascript所发起的http请求的代号,无刷新的数据更新.

2.编程模型:

(1).同步代码:按钮按下  执行耗时操作  等待执行返回  (多线程)

(2).异步代码:按钮按下  执行耗时操作  不会等待返回  直到完成才通知调用函数

3.Ajax的优点:

(1).不需要任何浏览器插件,在任何支持javascript的浏览器上运行.

(2).优秀的用户体验.

(3).提高web程序的性能.

(4).减轻服务器和宽带的负担.

4.Ajax的缺点:

(1).可能破换浏览器后退按钮的正常行为.

(2).对搜索引擎的支持不足.

(3).开发和调试工具的不足.

(4).手持设备支持性差.

5.XMLHttpRequest对象属性:

(1).readyState:http请求的状态.当一个XMLHttpRequest初次创建时,这个属性的值从0开始,直到接收到完整的HTTP响应,这个值增加到4.

{0:Uninitialized  初始状态

1:Open   open方法已调用.但是send()还未调用,请求还未发送

2:Sent   send()已调用,http请求发送到web服务器,未接受到响应(已发送,未接收)

3:Receiving    所有响应头部已经接收到,响应体开始接收但未完成(开始接收)

4:Loaded    http响应已经完全接收(接收完毕)  

}

(2).responseText:从服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,(readyState<3)就是空字符串.

(3).responseXML:对请求的响应,解析为xml并作为Document对象返回.

(4)statusText:表状态

status=200   表示OK

status=404   表示Not Found

6.XMLHttpRequest方法

(1)abort() 取消当前响应,关闭链接并且结束任何未决的网络活动

(2)getAllResponseHeaders()

 把http响应头部作为未解析的字符串返回.

(3)getResponseHeaders()

返回指定的http响应头部的值

(4)Open() 初始化http的请求参数,但是不发送请求

语法:

open(method,url,async,username,password)

method:用于请求的http的方法,(值包括get,post,head)

url:参数时请求的主体.

async:参数指示请求使用应该异步的执行.

(5)send()

发送http请求,使用传递给open()方法的参数,以及传递给该方法的可选请求体.

语法:send(body)

(6)setRequesHeader() 向一个打开但未发送的请求设置或添加一个http请求.

语法:

setRequesHeader(name,value)

name:参数是要设置的头部的名称.

value:参数时头部的值

7.jQuery中的Ajax

(1)最底层:$.ajax()

  第二层:load(),$.get()和$.post()

  第三层:$.getscript()和$getJson()

(2)load()方法

语法:

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

url:表示请求的html页面的url;

data(可选):发送到服务器端的key/value数据(一般用json格式),为object类型;

callback(可选):请求完成任务(无论成功或失败)时的回调函数;

(3)$.get()方法

语法:

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

url:待载入页面的url地址;

data(可选):待发送key/value参数;

callback:(可选)载入成功时回调函数;

type:(可选)返回内容格式,xml,html,script,json,text,_default;

(4)$.post()方法

语法:

$.post(url[,data][,type])

url:待载入页面的url地址;

data(可选):待发送key/value参数;

callback:(可选)载入成功时回调函数;

type:(可选)返回内容格式,xml,html,script,json,text,_default;

(5)$.getScript()方法

语法:

$.getScript(url,callback)

url:待载入的JS文件的地址;

callback:(可选)成功载入后回调的函数;

(6)$.getJson()方法

语法:

$.getJson(url,callback)

url:待载入的Json文件的地址;

callback:(可选)成功载入后回调的函数;

(7)$.ajax()方法

结构为:

$.ajax(options)  所有参数都是可选的

8.序列化元素

(1)seralize()方法  序列表表格内容为字符串(用于Ajax请求)

(2)serializeArray()方法

将DOM元素序列化后,返回json对象格式的数据,需要使用插件或者第三方库进行字符串化操作.

(3)$.param()方法

$.param()是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化.