jQuery框架AJAX技术6.pptVIP

第六章 jQuery中的AJAX操作 回顾 工具函数 操作数组 常用操作 目标 AJAX基础 AJAX简单示例 jQuery中AJAX相关工具函数 通过jQuery完成AJAX操作 jQuery中的AJAX全局函数 AJAX简介 AJAX全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML） 是指一种创建交互式网页应用的开发技术 改善用户体验，实现五刷新效果 AJAX的优势 不需要插件支持 优秀的用户体验 提高Web程序的性能 减轻服务器和带宽的负担 AJAX的不足 浏览器对XMLHttpRequest对象的支持度不足 破坏浏览器“前进”、“后退”按钮的正常功能 对搜索引擎的支持不足 创建请求对象 请求对象常用方法 请求对象常用属性 发送请求 跟踪进展和获得响应 完整AJAX示例代码 serialize( ) 其他序列化方法 $.serializeArray( ) 此方法用于把所有成功表单控件的值都收集到对象的数组中（包含控件的名称和值） $.param( ) 此方法是serialize()方法的核心，用来对一个对象数组或对象按照key/value进行序列化。 load()方法 此方法用于将服务器的资源加载到客户端，替换包装集中匹配元素的innerHTML属性值。 load(url, parameters, callback) 第一个参数：字符串，表示服务器端资源的URL 第二个参数：为一个对象，其属性被序列化为正确地编码的参数以便传递到请求里 第三个参数：为一个回调函数，在响应数据已经加载到包装集元素之后被调用 load()方法示例 get() 和 post()方法 $.get(url, parameters, callback) 以GET形式发送AJAX请求到后台 第一个参数：字符串，将要通过GET方法进行交互的服务器端资源的URL 第二个参数：一个对象，其属性作为名值对用于构造查询字符串并追加到URL 第三个参数：回调函数，在请求完成时被调用。 post()方法的用法和get()方法一样，不同的是发送数据的形式 get()方法示例 ajax()方法一 ajax()方法二 ajax()方法示例 ajaxSetup()方法 $.ajaxSetup(properties) 用于设置一组默认的AJAX属性，如果不替换值，则使用默认的AJAX属性。 属性的设定和ajax()方法中的参数一致 parseJSON()方法 getJSON()方法 getJSON()方法示例 全局函数 总结 AJAX基础 AJAX简单示例 jQuery中AJAX相关工具函数 通过jQuery完成AJAX操作 jQuery中的AJAX全局函数 作业 简述AJAX技术的优点和不足。 简述AJAX的开发流程。 简述jQuery中get()和post()方法的用法。 简述jQuery中的ajax()函数的用法。 简述jQuery中ajaxSetup()函数的用法。 * SSOFT V2.0 * XMLHttpRequest是AJAX的基础，表示请求对象。 XMLHttpRequest用于在后台与服务器交换数据。 为了兼容浏览器，需要作判断 var xmlhttp; if(window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{ // code for IE6, IE5 xmlhttp=new ActiveXObject(Microsoft.XMLHTTP); } 向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值 setRequestHeader(header,value) 将请求发送到服务器。 string：仅用于 POST 请求，表示传递的参数，格式为key1=val1key2=val2的查询字符串 send(string) 规定请求的类型、URL 以及是否异步处理请求。 1.method：请求的类型；GET 或 POST 2.url：文件在服务器上的位置 3.async：true（异步）或false（同步） open(method,url,async) 描述 方法 服务器端响应的状态码，例如200表示成功，404表示未找到页面 status 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 ready