发音:今天看慕课网的一篇帖子纠正ajax的发音我们通常都是(啊甲克斯)其实人家真正的读音是(A炸克斯);呵呵 万一 你要是进了外企呢
在没有ajax的时候网络交互的世界是同步的,ajax可以实现异步交互,那么同步和异步有什么区别?
同步:比如有一个非常复杂的表单,当我们填写完表单点击提交,过了两分钟服务器返回你其中一个字段填的不对(不管是格式不对,格式不对应该是客户端的校验,还是匹配不到),你把这个改了以后点击提交,又过了两分钟服务器返回提交失败(不管是你哪个没填,哪个填错了,还是响应时间过长等等),可想而知这对用户体验是无法形容的。难道我们就不能和服务器随时交互吗?非要等一个请求返回结果才能进行下一个吗?整个过程就是我客户端请求,服务器端处理,我客户端等待,你服务器响应有结果了重新载入整个页面---就这样反反复复-这样填写一个复杂的表单兼职就是噩梦啊。
异步:有了ajax异步刷新技术我们就可以避免上述交互带来的痛苦,利用它可以随时和服务器交互,也就是通常说的异步刷新(不需要刷新整个页面)还是拿表单举例我们在填写其中一个信息比如:邮箱的时候填完就可以和服务器交互(比如失去焦点)返回结果,比如邮箱重复了。我们就可以立即换个邮箱,同时继续填写其它信息,如此重复,点击最后一步提交的时候,成功的几率是不是就大了很多? 整个过程是不是没有整个页面进行刷新····
比喻:同步就好像打电话必须等这个电话挂了,重新给其他人打电话···
异步就好像发短信,我们可以同时和好多人发短信·······
也就是常说的同步会造成阻塞异步不会。
ajax的核心是xhr对象(那个单词好长);
俗话说珍惜生命远离ie6 就一个xhr对象还有兼容性,对于ie7+浏览器我们可以好自己new一个xhr对象,但是ie6 甚至比它还古老的浏览器不支持这个构造函数所以为了兼容:
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Micorsoft.XMLHTTP");
}
这样就兼容的获取了xrh对象,当然我们现在基本上都不考虑ie6了所以直接new XMLHttpRequest就可以,如果用第三方库jquery可以更快更方便
那么有了xhr对象我们就可发起请求了那么什么是HTTP请求?这个过程我们心里都能知道个大概就是我要什么东西问某个人要,某个人给不给,给了什么的过程。但是有时候面试的时候就会问到,我们就要用专业的词汇来回答,不能打比方了,这样显得很不专业。
http请求到完成的的完整过程:
- 建立TCP连接
- 客户端浏览器向服务器发送请求命令
- 客户端浏览器发送请求头信息
- 服务器应答
- 服务器发送应答头信息
- 服务器向浏览器发送数据
- 服务器关闭TCP连接
http请求的过程一般由四部分组成:
- http请求的方法或者动作,比如是GET请求还是POST请求
- 正在求求的url,总得知道请求的地址是什么吧?这个是后台提供我们沟通好就行
- 请求头,包含一些客户端环境信息,身份验证信息等。
- 请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息等等。
- 一般来说请求头和请求体会有一个空行用来分开
GET 请求:一般用于信息获取(查询),使用url传递参数通常所见就是?后面的,对任何人可见,对发送信息的数量也有限制一般在2000个字符,查询请求一般用get
POST请求:一般用于修改服务器上的资源,对发送信息的数量无限制。表单数据一般用post
既然请求由几部分组成,那么对应的响应呢?
一个HTTP响应一般由三部分组成:
- 一个数字和文字组成的状态吗,用来显示请求是成功还是失败
- 响应头,响应头也和请求头一样包含许多有用的信息,例如服务器类型,日期时间,内容类型和长度等。
- 响应体也就是响应正文。
这是一个响应的信息 200 ok 是我们最喜欢见到的, 下面是时间Date,server服务器类型等最下面应该有响应体的比如是字符串,纯文本等等,这里做模拟,没有列出来。响应头和响应体中间有空隙和请求头和请求体一样。
- 响应的状态吗由三位数字组成:我们都知道常见的200和404,有时候面试会被问到其他的状态码。
- 1XX:信息类,表示收到浏览器请求,正在进一步处理中
- 2XX:成功,表示用户请求被正确接收,理解和处理例如:200 ok
- 3XX : 重定向,表示请求没有成功,客户端必须采取进一步的动
- 4XX:客户端错误,表示客户端提交的请求有错误,例如:404 NOT Found,意味着请求中引用的文档不存在
- 5XX:服务器错误,表示服务器不能完成对请求的处理:如500
可以概括为:(知道这些状态吗我们可以方便的进行调试)
1开头表示,我知道你请求了,正在干活别催我
2开头比如:200 ,我活干完了照你的要求
3开头,我都不知道你要我干啥,请再说一遍
4开头, 常见的404一定是你地址写错了检查下url
5.开头比如500 ,对不起,我干不了你这活
xhr对象的方法(发送请求的方法)
配置:
open(method,url,async); method:get或者post(不区分大小写,建议大写),url,代表地址,async 代表同步异步,true代表异步,false代表同步,不写就默认true
发送:如果用get请求参数写在url里面?后面用&符号链接多个参数,如果是用post请求参数写在send()括号里面。
send(string)
上面我们知道了怎么用xhr对象发送请求,那么请求发出去了,服务器端总要给响应吧?俺么我们怎么得到服务器的响应呢,通过xhr的一些属性和方法:
responseText:获得字符串形式的响应数据。
responseXML获得xml形式的数据(比较少都用json)
status和statusText:以数字和文本的形式返回HTTP状态吗
getALLResponseHead而():获取所有的响应抱头。
getResponseHeader():查询响应中的某个字段的的值。 要传参数。
写到这里的时候准备说readyState属性,突然不知道怎么一句话区分readyStatede的0,1,2,3,4和status里面的200了。
应该是完成(4)和成功(200)两个词区分一下比较好.
readyState属性:如果是4表示服务器响应完成了成功没成功还不知道。
整个响应过程应该分为四个状态:
- 0:请求未初始化,open还没有调用。
- 1:服务器连接已经建立,open已经调用了。
- 2:请求已经接受,也就是接到头信息了。
- 3:请求处理中,也就是接收到响应主体了。
- 4:请求已完成,且响应已就绪,也就是响应完成了。
我们只需要关心最后一步 4 这个状态就可以了。
来个完整的过程:
var xhr=new XMLHttpRequest();
xhr.open("GET',"get.php",true);
如果是send请求就在这里加山一句设置请求头的代码把请求的参数存放到send(里面)
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){//响应完成了,并且成功了
对返回值比如:xhr.responseText做一些事情
}
}
这些基础知道了以后就要有实例子,所有的ajax实际例子都必须在服务器环境下运行。具体怎么搭建服务器环境有多重方法,最简单的好像是下载一个wamper就可以。
上面这些都是基本的知识点,具体实例子,我们可以百度一大堆得例子。有后端是php,java的。客气去网易云课堂 或者慕课网等看看实例
在学习的过程中,我们可能会遇到的问题有:
什么是json?
json是javascript对象bi表示法,是用来存储和交换文本信息的一种格式。采用键值对的方式来组织易于人们阅读和编写同时也易于机器解析和生成。还有json是独立于语言的,任何语言都可以解析json只要符合json的规则来。
json语法规则其实就是键值对,键有的也叫名用双引号包起来,值如果是字符串也用双引号包起来。这个和我们javascript的对象构造法不一样(用大花括号来构建对象{名:值}名可以不加双引号但是值如果是字符串还是要加双引号)json格式键值对中的值可以是:
json只是一种用来存储数据的格式或者语法。和我们js里面的对象还是有区别的,所有的json数据都是这些规则的组合。就是复杂不复杂而已 最外层都是花括号包起来里面就是键值对,值可以使多种多样--进行组合
- 数字
- 字符串
- 逻辑值 true false
- 数组
- 对象 在大花括号中 还可以是null
如何解析json json格式化校验工具有?检查json格式对不对
我们先不考虑如何解析json,先说为什么要解析json因为之前一直用的第三方库,jquery里面就有一个参数datatype:json我们可以设置为json(这样就算解析过了),却从来没有考虑过为什么要解析json?面试的时候也遇到JSON.parse 和eval有什么区别的问题,总是用jquery就不记得为什么要有这两个方法了。我们经常说json字符串,其实后台返回给我们的是json字符串xhr对象的responseText可以是字符串形式的纯文本,也可以是json字符串。
var json={
"staff":[0,1,2,3]
}
alert(json.staff) //0,1,2,3
如果:var json='{
"staff":[0,1,2,3]
}'
alert(json.staff)// undefined 弹出undefined的原因就是最外层的单引号。也就是没有对json字符串解析。后台给我们返回的都是json字符串我们需要对其解析。
JSON.parse 和eval 的比较:
var json='{"staff":[1,3,5]}'
alert(JSON.parse(json).staff)//1,3,5 alert(eval('('+json+')').staff)//1,3,5上面这两行代码结果是一样的。为什么都说两者之间是有区别的,说eval非常不安全呢?
如果我们把这个json改造一下:
var json='{"staff":[1,3,5],"name":alert(2)}';
很明显这个不符合json的语法规则键值对中的值alert(2)是个js语句弹框。
此时如果alert(JSON.parse(json).staff) 是没有任何效果的并且会报错···因为json不符合规则。
但是如果alert(eval('('+json+')').staff)//它会 先弹出2 再弹出1,3,5 这就是eval方法的坏处他还会解析不合法json里面的 js语句,可想而知它为什么不安全了?如果这是一段恶意代码呢??