《电子商务网站开发与管理 教学课件 ppt 作者 唐四薪 谭晓兰 屈瑜君 6jQuery Ajax基础》由会员分享，可在线阅读，更多相关《电子商务网站开发与管理 教学课件 ppt 作者 唐四薪 谭晓兰 屈瑜君 6jQuery Ajax基础（84页珍藏版）》请在金锄头文库上搜索。
1、电子商务网站开发与管理,唐四薪 主编,人民邮电出版社 2012年8月,ISBN:9787115282491 2012年8月,第六章 Ajax技术 基于jQuery,6.1.1 浏览器发送HTTP请求的方法,输入网址(请求载入页面) 提交表单(发送数据并载入页面) 用XMLHttpRequest对象发送异步HTTP请求（页面不会刷新）,浏览器,Web服务器,HTTP请求,HTTP响应(完整的页面),页面会刷新,HTTP响应(HTML片段或字符串等),Ajax概述,Ajax：异步JavaScript和XML（Asynchronous JavaScript and XML） 本质： Ajax：客户端
2、编程和服务器端编程的综合运用 客户端编程：HTML、CSS、JavaScript 服务器端编程：如ASP,传统Web应用程序的不足,一个HTTP请求对应一个页面 加载页面时用户必须等待 Ajax技术（可以解决这两个问题） 异步：煮饭的过程中我们可以继续做菜 浏览器与服务器交互的过程中，用户仍然可以在浏览器上进行其他一些操作。,基于Ajax的Web应用程序,Ajax程序： 在与Web服务器交互的过程中只传输页面上需要做更改的区域，而不传输整个页面； 同时，在与Web服务器交互的过程中，客户端仍然可以在当前页面继续操作，而不必等待服务器的响应。,浏览器,Web服务器,HTTP请求,HTTP响应(H
3、TML片段或字符串等),传统的Web应用程序,传统的Web应用程序：发送请求给服务器服务器对请求进行处理（此时客户端需等待）处理完成后服务器发送回全新的页面,基于Ajax的Web应用程序,Ajax技术的优点, 更好的用户体验，用户感觉响应速度更快； 可以把一些由服务器负担的工作转嫁到客户端，利用客户端闲置的处理能力来处理，减轻服务器和带宽的负担； Ajax由于可以调用外部数据，能方便地实现网站间数据的共享； 基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序； Ajax使Web中的界面与应用分离,9.1.2 载入页面的方法比较,标记 远程脚本技术 Ajax技术,9.1.3 用原始的Aj
4、ax技术载入文档,Ajax技术的核心：XMLHttpRequest对象 XMLHttpRequest对象可以在不重新加载页面的情况下更新页面的局部,window,XMLHttpRequest,location,document,XMLHttpRequest对象的工作过程,自动售水机 投硬币 出水 准备容器接水,XMLHttpRequest对象的工作过程与自动售货机售货过程的对比,投币,准备接水,接水,用户,出水,浏览器,Web服务器,初始化XMLHttpRequest对象, 发送异步请求, 返回响应, 用容器元素载入响应的内容, 监听服务器响应,XMLHttpRequest对象的工作过程,创建
5、XMLHttpRequest对象的实例 使用open()方法指定载入文档请求 使用send()方法发送请求投硬币 使用onreadystatechange事件监听服务器准备接水 使用DOM元素载入服务器返回的内容接水, 创建XMLHttpRequest对象的实例,创建XMLHttpRequest对象的实例 var xmlHttpReq; if (window.ActiveXObject) xmlHttpReq = new ActiveXObject(“Microsoft.XMLHTTP“); else if (window.XMLHttpRequest) xmlHttpReq = new XM
6、LHttpRequest(); ,针对IE6,针对除IE6 以外的浏览器, 使用open()方法指定载入文档请求,使用XMLHttpRequest对象的open()方法指定载入文档的HTTP请求类型、文件名以及是否为异步方式 xmlHttpReq.open(“GET“, “9-2.html“, True);,http请求的方式,请求的URL,是否为异步方式, 使用send()方法发送请求,使用open()方法指定了请求后，还要用send()方法将请求发送出去 xmlHttpReq.send(null);,如果不写null，则在Firefox中无法运行, 使用onreadystatechange
7、事件监听服务器,用send()方法发送了一个载入文档的请求后，还要准备接收服务器端返回的文档或内容。但是客户端无法确定服务器端什么时候会完成这个请求。这时需要用事件监听机制来捕获请求的状态，XMLHttpRequest对象提供了onreadystatechange事件实现这一功能。 xmlHttpReq.onreadystatechange=RequestCallBack; function RequestCallBack() if(xmlHttpReq.readyState = 4 ,出来的水,说明,onreadystatechange事件中的事件处理函数只有在readyState属性发生改
8、变时才会触发，readyState的值表示服务器对当前请求的处理状态，可以根据这个值来进行不同的处理。 readyState有五种可取值（0：尚未初始化；1：正在加载；2：加载完毕；3：正在处理；4：处理完毕）。 status属性表明请求是否已经成功，如果status属性值为200表明一切正常，服务器已成功接收了客户端的请求,说明, 服务器在收到客户端的请求后，根据请求返回相应的内容。返回的内容通常有两种形式，一种是文本形式，存储在responseText中，另一种是XML格式，存储在responseXML中。它们都是只读属性，只有当readyState属性值为4的时候，才能通过它们获取完整的
9、响应信息。 如果设置服务器端响应内容类型为Response.ContentType=“text/xml“，responseXML才会有值并被解析成一个XML文档。,说明,运行之前必须将这两个文件都保存为utf-8编码方式。因为XMLHttpRequest对象传输数据采用的默认编码方式是utf-8。,IE浏览器的Ajax缓存问题,在Ajax应用中，当用户访问一次后，再进行访问时而且XMLHttpRequest请求中的URL不变时，在IE中就会发生这样的现象，那就是取URL中的网页不会到服务器端取，而是直接从IE的缓存中取 。解决办法： 加随机数 xmlHttpReq.open(“get“,“9-
10、2.html?t=“+Math.random (); 加时间戳方法 xmlHttpReq.open(“get“,“9-2.html?t=“+ new Date().getTime(),载入ASP文档,用Ajax技术可以载入任何网页文档，如果载入的是动态网页（如ASP），则服务器端会先执行动态网页，再将生成的静态HTML代码发送给客户端，因此客户端网页加载的是动态网页执行后的静态HTML代码,Ajax程序与传统ASP程序的区别,在获取并显示服务器端数据时，页面并没有刷新 由于页面没有刷新，浏览器不知道服务器什么时候完成了对请求的处理，所以需要onreadystatechange进行监听,传统的W
11、eb编程与Ajax编程的区别,客户端发送请求的方式不同 服务器生成的响应不同 客户端加载响应的方式不同,XMLHttpRequest与服务器端通信的步骤, 创建XMLHttpRequest对象； 使用open()方法设置XMLHttpRequest对象请求的URL、发送HTTP请求的方式以及是否为异步模式等； 使用send()方法发送HTTP请求； 使用onreadystatechange事件监听服务器端的反馈，根据readyState属性来判断服务器是否已经对请求处理完成，一旦完成则接收服务器端传回的数据,XMLHttpRequest对象与服务器通信的过程,初始化,发送请求,等待服务器响应,
12、获取响应,用回调函数监控XMLHttpRequest对象的状态，当readyState为4时获取服务器响应,对XMLHttpRequest对象的反思, XMLHttpRequest对象虽然名称中含有XML，但它并不限于和XML文档一起使用，它可以接收任何形式的文本文档，如HTML文档、JSON文档、XML文档等。 XMLHttpRequest对象与ASP中的Request对象的功能也完全不同，Request对象是服务器端的对象，它的作用是获取从客户端发送来的数据；而XMLHttpRequest对象是位于客户端浏览器中的对象，它的作用是发送数据给服务器后再从服务器获取传回来的数据,9.2 用jQ
13、uery Ajax方法载入文档,jQuery中常用的Ajax方法,使用load方法载入HTML文档,Ajax的本质特征就是刷新页面的局部，这主要是通过将远程的文档载入到页面的局部元素中实现的 load()方法能载入远程HTML文档并将其插入到指定的DOM元素中。它的语法为 load( url , data , callback) function Ajax() $(“#target“).load(“9-3.asp“); ,用load方法载入9-3.asp到#target元素中,load()方法的参数,2. 载入HTML文档中的指定元素,function Ajax() $(“#target”).
14、load(“9-5.html .title”); / URL和选择器之间必须有一个空格 ,本章所有程序的HTML代码,3. 用load方法发送数据给服务器,function Ajax() $(“#target“).load(“9-6.asp? user=张三&comment=很好“, nick:“rain“, age:22) ,以GET方式发送,以POST方式发送,load ()方法的局限性, load方法用于直接返回HTML的Ajax接口，不能返回其他格式的文档； load是一个jQuery对象的方法,需要在jQuery对象上调用，并且会将返回的HTML加载到这个对象内，即使设置了回调函数也
15、还是会加载，因此不方便对返回的HTML代码先进行处理后再加载,4. 关于Ajax程序的编码问题,（1）将服务器端程序和客户端页面的编码方式都设置为utf-8。 （2）对于中文网页来说，默认的字符编码是gb2312。如果不想修改页面的编码类型，也是可以的，只要在服务器端程序的首行添加一句Response.Charset=“gb2312“就可以了，客户端页面和服务器端程序都使用默认的gb2312编码方式即可,9.2.2 JSON概述,JSON：JavaScript Object Notation的缩写，意思是JavaScript对象表示法 JSON可用来创建JSON对象或JSON数组 JSON对象
16、 var user = “username“:“andy“, “age“:20, “sex“:“male“ ; JSON数组 “city“:“beijing“,“postcode“:“222333“, “city“:“newyork“,“postcode“:“555666“ ,一个复杂的JSON对象user,var user = “username“:“andy“, “age“:20, “info“: “tel“: “123456“, “cellphone“: “98765“, “address“: “city“:“beijing“,“postcode“:“222333“, “city“:“newyork“,“postcode“:“555666“ ,该JSON对象中有几个
