JQuery-Ajax

SofteemConsultancyServicejQuery之之之之Ajax介绍介绍介绍介绍主讲主讲主讲主讲:周玮周玮周玮周玮SofteemConsultancyServicejQuery简介简介简介简介jQuery由美国人由美国人由美国人由美国人JohnResig创建创建创建创建，，，，至今已吸引了来自至今已吸引了来自至今已吸引了来自至今已吸引了来自世界各地的众多世界各地的众多世界各地的众多世界各地的众多javascript高手加入其高手加入其高手加入其高手加入其team。。。。jQuery是继是继是继是继prototype之后又一个优秀的之后又一个优秀的之后又一个优秀的之后又一个优秀的Javascript框框框框架架架架。。。。其宗旨是其宗旨是其宗旨是其宗旨是——WRITELESS,DOMORE,写更少的写更少的写更少的写更少的代码代码代码代码,做更多的事情做更多的事情做更多的事情做更多的事情。。。。它是轻量级的它是轻量级的它是轻量级的它是轻量级的js库库库库(压缩后只有压缩后只有压缩后只有压缩后只有19k)，，，，这是其它的这是其它的这是其它的这是其它的js库库库库所不及的所不及的所不及的所不及的，，，，它兼容它兼容它兼容它兼容CSS3，，，，还兼容各种浏览器还兼容各种浏览器还兼容各种浏览器还兼容各种浏览器（（（（IE6.0+,FF2.0+,Safari3.0+,Opera9.0+,Chrome）。）。）。）。jQuery是一个快速的是一个快速的是一个快速的是一个快速的，，，，简洁的简洁的简洁的简洁的javaScript库库库库，，，，使用户使用户使用户使用户能更方便地处理能更方便地处理能更方便地处理能更方便地处理HTMLdocuments、、、、events、、、、实现动实现动实现动实现动画效果画效果画效果画效果，，，，并且方便地为网站提供并且方便地为网站提供并且方便地为网站提供并且方便地为网站提供AJAX交互交互交互交互。。。。jQuery还有一个比较大的优势是还有一个比较大的优势是还有一个比较大的优势是还有一个比较大的优势是，，，，它的文档说明很它的文档说明很它的文档说明很它的文档说明很全全全全，，，，而且各种应用也说得很详细而且各种应用也说得很详细而且各种应用也说得很详细而且各种应用也说得很详细，，，，同时还有许多成熟同时还有许多成熟同时还有许多成熟同时还有许多成熟的插件可供选择的插件可供选择的插件可供选择的插件可供选择。。。。SofteemConsultancyServicejQuery能做什么能做什么能做什么能做什么jQuery库为共同的库为共同的库为共同的库为共同的web脚本提供了一种通用的抽象层脚本提供了一种通用的抽象层脚本提供了一种通用的抽象层脚本提供了一种通用的抽象层,并且它几乎在每种脚本环境都是有用的并且它几乎在每种脚本环境都是有用的并且它几乎在每种脚本环境都是有用的并且它几乎在每种脚本环境都是有用的。。。。它以插件的它以插件的它以插件的它以插件的形式持续地通过开发加入新的功能形式持续地通过开发加入新的功能形式持续地通过开发加入新的功能形式持续地通过开发加入新的功能。。。。这些核心的特这些核心的特这些核心的特这些核心的特性性性性，，，，满足以下的需求满足以下的需求满足以下的需求满足以下的需求：：：：获取页面的部分内容获取页面的部分内容获取页面的部分内容获取页面的部分内容修改页面的外观修改页面的外观修改页面的外观修改页面的外观修改页面的内容修改页面的内容修改页面的内容修改页面的内容在页面中响应用户的交互在页面中响应用户的交互在页面中响应用户的交互在页面中响应用户的交互给页面加上动画给页面加上动画给页面加上动画给页面加上动画无刷新返回服务器端的信息无刷新返回服务器端的信息无刷新返回服务器端的信息无刷新返回服务器端的信息(AJAX)简化共同的简化共同的简化共同的简化共同的JavaScript任务任务任务任务SofteemConsultancyServicejQuery安装安装安装安装中引入中引入中引入中引入scriptsrc=jquery.min.jstype=text/javascript/script一定要有一定要有一定要有一定要有/script,不能不能不能不能scripttype=......./jQueryAPI_CHM-900205.CHM中文手册中文手册中文手册中文手册SofteemConsultancyServicejQueryTest.htmlhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=GB18030titlejQueryTest/titlescriptsrc=jquery.min.jstype=text/javascript/script/headbodyscripttype=text/javascript$(document).ready(function(){alert(hello,world!);});/script/body/htmlSofteemConsultancyServicejQueryTest.htmlscripttype=text/javascriptfunctioncheckUser(){alert($(#mytext).text());$(#mytext).text(bhello,world!/b);$(#mytext).html(bhello,world!/b);alert($(#username).val());}/scriptformname=form1method=postaction=username:inputtype=textname=usernameid=usernamespanid=mytextaaa/spaninputtype=buttononclick=checkUser()value=check/formSofteemConsultancyServiceAjax请求请求请求请求--jQuery.ajax(options)通过通过通过通过HTTP请求加载远程数据请求加载远程数据请求加载远程数据请求加载远程数据。。。。jQuery底层底层底层底层AJAX实现实现实现实现。。。。简单易用的高层实现见简单易用的高层实现见简单易用的高层实现见简单易用的高层实现见$.get,$.post等等等等。。。。$.ajax()返回其创建的返回其创建的返回其创建的返回其创建的XMLHttpRequest对象对象对象对象。。。。大多数情大多数情大多数情大多数情况下你无需直接操作该对象况下你无需直接操作该对象况下你无需直接操作该对象况下你无需直接操作该对象，，，，但特殊情况下可用于手动终止请求但特殊情况下可用于手动终止请求但特殊情况下可用于手动终止请求但特殊情况下可用于手动终止请求。。。。注意注意注意注意：：：：如果你指定了如果你指定了如果你指定了如果你指定了dataType选项选项选项选项，，，，请确保服务器返回正确的请确保服务器返回正确的请确保服务器返回正确的请确保服务器返回正确的MIME信息信息信息信息，，，，(如如如如xml返回返回返回返回text/xml)。。。。错误的错误的错误的错误的MIME类型可能类型可能类型可能类型可能导致不可预知的错误导致不可预知的错误导致不可预知的错误导致不可预知的错误。。。。见见见见SpecifyingtheDataTypeforAJAXRequests。。。。$.ajax()只有一个参数只有一个参数只有一个参数只有一个参数：：：：参数参数参数参数key/value对象对象对象对象，，，，包含各配置及回包含各配置及回包含各配置及回包含各配置及回调函数信息调函数信息调函数信息调函数信息。。。。详细参数选项见下详细参数选项见下详细参数选项见下详细参数选项见下。。。。jQuery1.2中中中中，，，，您可以跨域加载您可以跨域加载您可以跨域加载您可以跨域加载JSON数据数据数据数据，，，，使用时需将数据类使用时需将数据类使用时需将数据类使用时需将数据类型设置为型设置为型设置为型设置为JSONP。。。。使用使用使用使用JSONP形式调用函数时形式调用函数时形式调用函数时形式调用函数时，，，，如如如如myurl?callback=?jQuery将自动替换将自动替换将自动替换将自动替换?为正确的函数名为正确的函数名为正确的函数名为正确的函数名，，，，以以以以执行回调函数执行回调函数执行回调函数执行回调函数。。。。数据类型设置为数据类型设置为数据类型设置为数据类型设置为jsonp时时时时，，，，jQuery将自动调将自动调将自动调将自动调用回调函数用回调函数用回调函数用回调函数。。。。SofteemConsultancyServiceAjax请求设置请求设置请求设置请求设置(options)async(Boolean):(默认默认默认默认:true)默认设置下默认设置下默认设置下默认设置下，，，，所有请求均为异步所有请求均为异步所有请求均为异步所有请求均为异步请求请求请求请求。。。。如果需要发送同步请求如果需要发送同步请求如果需要发送同步请求如果需要发送同步请求，，，，请将此选项设置为请将此选项设置为请将此选项设置为请将此选项设置为false。。。。注注注注意意意意，，，，同步请求将锁住浏览器同步请求将锁住浏览器同步请求将锁住浏览器同步请求将锁住浏览器，，，，用户其它操作必须等待请求完成才用户其它操作必须等待请求完成才用户其它操作必须等待请求完成才用户其它操作必须等待请求完成才可以执行可以执行可以执行可以执行。。。。beforeSend(Function):发送请求前可修改发送请求前可修改发送请求前可修改发送请求前可修改XMLHttpRequest对象的函数对象的函数对象的函数对象的函数，，，，如添加自定义如添加自定义如添加自定义如添加自定义HTTP头头头头。。。。XMLHttpRequest对象是对象是对象是对象是唯一的参数唯一的参数唯一的参数唯一的参数。。。。AjaxEvent.cache(Boolean):(默认默认默认默认:true)jQuery1.2新功能新功能新功能新功能，，，，设置为设置为设置为设置为false将不会从浏览器缓存中加载请求信息将不会从浏览器缓存中加载请求信息将不会从浏览器缓存中加载请求信息将不会从浏览器缓存中加载请求信息。。。。complete(Function):请求完成后回调函数请求完成后回调函数请求完成后回调函数请求完成后回调函数(请求成功或失败时请求成功或失败时请求成功或失败时请求成功或失败时均调用均调用均调用均调用)。。。。参数参数参数参数：：：：XMLHttpRequest对象对象对象对象，，，，成功信息字符串成功信息字符串成功信息字符串成功信息字符串。。。。Ajax事件事件事件事件。。。。contentType(String):(默认默认默认默认:application/x-)发送信息至服务器时内容编码类型发送信息至服务器时内容编码类型发送信息至服务器时内容编码类型发送信息至服务器时内容编码类型。。。。默认值适合大默认值适合大默认值适合大默认值适合大多数应用场合多数应用场合多数应用场合多数应用场合。。。。SofteemConsultancyServiceAjax请求设置请求设置请求设置请求设置(options)data(Object,String):发送到服务器的数据发送到服务器的数据发送到服务器的数据发送到服务器的数据。。。。将自动转换为请求将自动转换为