版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、 深入浅出深入浅出AJAX董艳琴2016.7.14AJAX概念:2 什么是AJAX:Ajax:Asynchronous JavaScript And XML 异步的javascript和xml 为什么要使用AJAX? 是为了解决传统web应用当中“发送请求-等待响应”这种模式的弊端而创建的技术。 传统模式的弊端是: 浏览器在发送完请求之后,只能等待服务器的响应,用户不能做其它的操作,浏览器发送完请求,会抛弃整个页面,等待服务器返回新的页面,也就是说,浏览器和服务器之间交互的数据量很大,不能够做到按需获取数据。AJAX 原理:3 通过浏览器内置的一个对象XmlHttpRequest异步地向服务器
2、发送请求,服务器在处理完请求之后,返回数据给XmlHttpRequest,通过javascript,可以获取XmlHttpRequest中的数据,然后,使用该数据更新页面。整个过程当中,用户不用等待服务器的响应。 所谓异步,指的是浏览器并没有抛弃整个页面,用户仍然可以操作原有的页面,也就是,不是通过表单提交的方式向服务器发送请求。HTTP协议:4 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程。 一个完整的HTTP请求过程,通常有下面7个步骤: 1.建立TCP连
3、接 2.Web浏览器向Web服务器发送请求命令 3.Web浏览器发送请求头信息 4.Web服务器应答 5.Web服务器发送应答头信息 6.Web服务器向浏览器发送数据 7.Web服务器关闭TCP连接一个HTTP请求一般由四部分组成:5 1.HTTP请求的方法或动作,比如是GET还是POST请求 2.正在请求的URL,总得知道请求的地址是什么吧 3.请求头,包含一些客户端环境信息,身份验证信息等 4.请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息等等 请求头和请求体之间又一个空行,表示请求头结束了,接下来的内容就是请求体。请求方式GET和POST6 GET:一般用于
4、信息获取,使用URL传递参数,对所发送的信息数量有限制,一般在2000个字符。(默认的)。一般是用于查询信息,而不是修改信息。 POST:一般用于修改服务器上的资源,对所发送信息的数量无限制。HTTP响应:7 一个HTTP响应一般由三部分组成: 1.一个数字和文字组成的状态码,用来显示请求是成功还是失败 2.响应头,和请求头一样包含许多有用的信息,例如服务器类型、日期时间、内容类型和长度等 响应头和实体内容之间要用空行隔开HTTP状态码 status8 HTTP状态码由3位数字构成,其中首位数字定义了状态码的类型: 1*:信息类,表示收到Web浏览器请求,正在进一步的处理中 2*:成功,表示用
5、户请求被正确接收、理解和处理。例如:200 OK 3*:重定向,表示请求没有成功,客户必须采取进一步的动作 4*:客户端错误,表示客户端提交的请求有错误,例如:404 NOT Found,表示请求中所引用的文档不存在 5*:服务器错误,表示服务器不能完成对请求的处理:如 500XMLHTTPRequest对象9 作用:XMLHTTPRequest对象用于在后台与服务器交换数据 创建XMLHTTPRequest对象: 所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象: xmlHttpRequest = new
6、 XMLHttpRequest(); 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象: xmlhttp=new ActiveXObject(Microsoft.XMLHTTP);xmlHttpRequest 的属性:10 readyState HTTP 请求的状态。当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。 readyState 的值不会递减,除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候,都会触发 o
7、nreadystatechange 事件句柄。 5 个状态中每一个都有一个相关联的非正式的名称,下表列出了状态、名称和含义:xmlHttpRequest 的属性:11 responseText:获得字符串形式的响应数据 responseXML:获得XML形式的响应数据 status:由服务器以数字形式返回的HTTP状态代码。如 200 表示成功,而 404 表示 Not Found 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。 statusText:由服务器以文本形式返回HTTP状态码。当状态为 200 的时候它是 OK,当状态为 404 的时候它是 Not F
8、ound。和 status 属性一样,当 readyState 小于 3 的时候读取这一属性会导致一个异常。xmlHttpRequest 的事件句柄(是指事件发生时要进行的操作):12 onreadystatechange 每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时,它也可能调用多次。 onreadystatechange 是一个事件句柄。它的值是一个函数的名称,当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时,我们
9、才执行代码。xmlHttpRequest 的方法:13:初始化 HTTP 请求参数 method一般大写(GET/POST);URL可以用相对地址;async默认true(异步) 这个方法初始化请求参数以供 send() 方法稍后使用。它把 readyState 设置为 1,删除之前指定的所有请求头部,以及之前接收的所有响应头部,并且把 responseText、responseXML、status 以及 statusText 参数设置为它们的默认值。:发送一个HTTP请求 如果请求体不是必须的话,这个参数就为 null。对于任何其他方法,这个参数是不可用的,应该为 null(有些实现不允许省
10、略该参数)。AJAX异步请求的步骤:14 1.创建XMLHttpRequest对象 2.设置回调函数 3.初始化XMLHttpRequest组件 4.发送请求参数问题:15 var url = /ajax/ValiAjax?userName=+document.getElementById(userName).value; xmlHttpRequest.open(GET,url,true); xmlHttpRequest.send(null); var url = /ajax/ValiAjax.php; xmlHttpRequest.open(POST,url,true); xmlHttpRe
11、quest.setRequestHeader(Content-Type,application/x-www-form-urlencoded); xmlHttpRequest.send(userName=+ document.getElementsByName(userName)0.value); POST请求要加:xmlHttpRequest.setRequestHeader(Content-Type,application/x-www-form-urlencoded); 为了告诉服务器,这是一个POST请求,请求的内容是用这种URL的方式发送过来的。例子:16 var xhr; if (wi
12、ndow.XMLHttpRequest) / code for IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest(); else / code for IE6, IE5 xhr=new ActiveXObject(Microsoft.XMLHTTP); xhr.open(GET,ajax.json,true);xhr.onreadystatechange = stateChange;function stateChange() if(xhr .readyState = 4) /HTTP响应已经完全接收 if(xhr.stat
13、us = 200) /请求成功,响应完成 document.getElementById(myDiv).innerHTML=xhr.responseText; JSON17 Javascript object notation,它是一种轻量级的数据交换语言,一般用于客户端与服务器端进行数据交换(即服务器端生成符合json语法格式的字符串,发送给服务器,然后,客户端再将该字符串转换成javascript对象)。 JSON是存储和交换文本信息的语法,类似XML,它采用键值对的方式来组织,易于人们阅读和编写,同时也易于机器解析和生成。 JSON是独立于语言的,也就是说不管什么语言,都可以解析JSON
14、,只需要按照JSON的规则来就行。18 语法:propName : value 其中propName代表属性名,必须用或”括起来,value代表值,如果值是String,也必须用 或“ “括起来。值还可以是null,true/false。当然,也可以是一个对象。如: 对象: “stuff“ : “ name“ : “ 小明 “ , “ age“: “ 20“ , “name” : “小红” , “age” : “22” 数组: “propName“ : “value“ , “propName“ : “value“ 将符合json语法格式的字符串转换成js对象: eval和JSON.parse eval不会去看JSON字符串是否合法,JSON字符串中的JS方法会直接执行,这样非常危险。用eval方法去执行第三方的JSON数据,可能包含恶意代码。尽可能用JSON.parse()方法解析字符串本身,该方法还可以捕捉JSON中的语法错误。JSON将符合json语法格式的字符串转换成js对象:19用jQuery实现JSON20:类型,POST或GET,默认为GET:发送请求的地址:预期服务器返回的数据类型,如果不指定,jQuery讲自动根据HTTP包MIME信息来智能判断,一般我们采用JSON格式
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年个性化住宅装修服务协议范本
- 2024年度旅游包车服务协议范本
- 2024年股东合伙协议样本
- 2024-2025学年北京市海淀区首都师大附中永定分校九年级(上)期中数学试卷
- 2024年电子行业保密协议范本
- 2024年专业监控设备安装协议模板
- 2024年商业合作盈利共享协议
- 2024年度水产养殖饲料订货供应协议
- 2024年住宅建筑质量保障协议
- 血管解剖课件教学课件
- 2024自动导引车AGV技术规范
- 广东某办公楼改造装饰工程施工组织设计方案
- 《20世纪的科学伟人爱因斯坦》参考课件2
- 八年级道德与法治上册 第一单元 走进社会生活 单元复习课件
- 设计师会议管理制度
- 三年级上册数学说课稿《5.笔算多位数乘一位数(连续进位)》人教新课标
- 行贿受贿检讨书
- 人教版《劳动教育》六上 劳动项目二《晾晒被子》教学设计
- (正式版)QC∕T 1208-2024 燃料电池发动机用氢气循环泵
- 中外合作办学规划方案
- 医学美容技术专业《中医美容技术》课程标准
评论
0/150
提交评论