jQuery讲义7：jQuery与Ajax的应用.ppt

jQuery与Ajax的应用 Ajax技术简介 Ajax全称Asynchronous JavaScript and XML，异步的JavaScript与XML,其最大特点在于它无需重新加载整个页面就可以向服务器发起异步请求的能力，开启了一整套完全崭新的用户交互范例并且使得dom脚本的应用成为可能。 Ajax请求的生命周期： 图中XHR是指XMLHttpRequest，它是Ajax中最重要的对象，用于向服务器发起异步请求并响应 方法 使用原生XHR来获取并包含HTML片断 【演示第1个Ajax例子】 load( )方法 load(url,data,callback)方法 向指定的URL发起带有可选请求参数的Ajax请求,并将响应文本插入包装集dom元素中。可以指定一个回调函数，并在请求完成且dom被修改之后调用此函数。 url参数表示请求的服务器端资源的url地址，可以在url地址后加上紧随空格的选择器后缀来指定选择器。 data参数表示发送至服务器的查询字符串/对象/对象数组。该参数如果省略了或指定为字符串，则采用get请求，否则将采用post请求 callback参数表示请求完成时执行的回调函数，而无论请求成功或失败。该函数有三个参数：responseText,textStatus,xmlHttpRequest 【load方法举例】 $.get( )方法 $.get(url,data,callback,type)方法 使用指定的URL，用已传入的参数作为查询字符串向服务器发起get请求。 url参数表示所请求的服务器端资源的url地址。 data参数表示发送至服务器的查询字符串/对象/对象数组。 callback参数表示请求完成时执行的回调函数（只有当response的返回状态是success才调用）。该函数有三个参数，第一个参数是响应主体（可以是xml文档、JSON文件、HTML片断等），第二个参数是状态文本（success,error,notmodified,timeout）第三个参数包含对XHR实例的引用。 type参数指定如何解析响应主体，可以是下列类型中的一种：html ,text,xml,json,script或jsonp 【$.get方法举例】 $.post( )方法 除了发起的是post http请求， $.post( )的使用与$.get( )是一样的 $.post(url,data,callback,type)方法 使用指定的URL，用已传入的参数作为查询字符串向服务器发起post请求。 url参数表示所请求的服务器端资源的url地址。 data参数表示发送至服务器的查询字符串/对象/对象数组。 callback参数表示请求完成时执行的回调函数（只有当response的返回状态是success才调用）。该函数有三个参数，第一个参数是响应主体（可以是xml文档、JSON文件、HTML片断等），第二个参数是状态文本（success,error,notmodified,timeout）第三个参数包含对XHR实例的引用。 type参数指定如何解析响应主体，可以是下列类型中的一种：html ,text,xml,json,script或jsonp 【$.post方法举例】 $.getJSON( )方法与$.getScript( )方法 $.getJSON(url,data,callback)方法 使用指定的URL，用已传入的参数作为查询字符串向服务器发起get请求，并把响应解析为JSON字符串。 url参数表示所请求的服务器端资源的url地址。 data参数表示发送至服务器的查询字符串/对象/对象数组。 callback参数表示请求完成时执行的回调函数（只有当response的返回状态是success才调用）。该函数有三个参数，第一个参数是JSON格式的响应主体，第二个参数是状态文本（success,error,notmodified,timeout）第三个参数包含对XHR实例的引用。 $.getScript(url, callback)方法 通过 HTTP GET 请求载入并执行一个 JavaScript 文件。 url参数表示所请求的服务器端js脚本的url地址。 callback参数表示加载并执行js脚本完成时执行的回调函数。 【$.getScript、$.getJSON方法举例】 完全控制Ajax请求：$.ajax( )方法 如果我们想要或者需要控制Ajax请求的各种