继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

《Ajax全接触笔记》——仅仅作为笔记,供日后查阅

qq_橱窗人_0
关注TA
已关注
手记 9
粉丝 33
获赞 506

http://www.imooc.com/video/5644
1.同步的概念
客户端发送请求,服务器处理响应的时候,客户端只能等待,然后在进行页面载入。
2.异步概念
客户端局部请求,服务器处理相应时候,客户端仍然可以进行下一步操作
3.http相关知识
1)http是计算机通过网络进行通信的规则,是一种无状态协议,即不建立持久连续(指当客户端和服务器通信时候,没有相关东西进行记录,一旦数据请求完毕,便断了联系)。
2)http请求有7个步骤
①建立TCP连接
②web浏览器向web服务器发送请求命令
③web浏览器发送请求头信息
④web服务器发出应答
⑤web服务器发出响应头信息
⑥web服务器向浏览器发送数据
⑦web服务器关闭TCP连接
3)http请求由四部分
①http请求的方法或者动作比如POST/GET
②正在请求的URL
③请求头包含的一些客户端的环境信息,身份验证信息等
④请求主体,也就是请求正文,请求正文可以包含客户提交的查阅字符串信息,表单信息等
GET/login.php http/1.1
Host:localhost
connection:keep-alive
accept:text/javascript
user name=admin&password=12345
4)get/post
get:一般用于信息获取、使用URL传递参数、对阶发送的数量也有限制,一般在2000字
post:一般用于修改服务器上的资源,对于所发送的信息的数量没有限制
5)一个HTTP响应一般由三部分组成
①一个数字和文字组成的状态码,用来显示请求是成功的还是失败
②响应头,响应头和请求头一样包含许多有用的信息,比如服务器类型,时间,日期等等
③相应题也是响应正文
1XX信息类,代表web正在接受请求
2XX接收成功,用户的请求正在被接受
3XX重定向,没成功
4XX客户端错误一次
5XX服务器错误
4.XMLHttpRequest对象
可以利用XMLHttpRequest进行异步操作,实现部分更新
1)Ajax可以通过以下方式为我们服务
①运用html和css来实现页面,表达信息
②运用XMLHttpRequest和WEB服务器进行数据的异步交换
③利用js操作DOM实现局部刷新
2)如何使用XMLHttpRequest
var request=XMLHttpRequest();
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}else{
request=new ActiveXObject("Microsoft XMLHTTP");//兼容IE5和IE6
}
}
3)XMLHttpRequest发送请求
open( method,url,sync)
send(string)
其中method代表用什么方式,url代表请求头,sync默认是true异步
①request.open("GET","get.php",true);
request.send();
②request.open("POST","post.php",true);
request.send();
③request.open("POST","post.php",true);
request.setRequestHeader(content-type:“text/lson”)
request.send()
4)服务器响应
①responseText:获得字符串形式的相应数据
②responseXML:获取XML形式的响应数据
③status和statusText:以数据和文本形式返回Http的响应状态码
getAllResponseHeader();获取所有的响应头
5)XMLHttpRequest取得响应
①readyState属性
0请求初始化,open还没有调用
1服务器连接简历,open已经调用了
2请求已接收,也就是接收到奥头的信息了
3请求处理中,也就是接收到相应主题了
4请求已经完成了,且响应已经准备就绪
var request=newXMLHttpRequest();
request.open("GET","get.php".true);
request.send();
request.onreadyStatechange=fuction(){
if(request.readyState===4&&request.status===200){
//do something
}
}
5json
1)json的认识
①JavaScript的对象表示法
②json是存储和交换文本信息的语法,类似XML,它采用键值得方式来组织,易于人们阅读和编写,同事也易于及其解析和生成
③json是独立语言的,也就是说不管什么语言都可以解析json只需要按照json规则就可以
2)json与XML比较
①json的长度和XML格式比起来很短小
②json读取速度很快
③json可以用JavaScript内简历的方法直接解析,转换成为JS对象,非常方便
3)json语法规则
json数据中书写格式是名称:值,与对象不同,其键值名称必须使用引号
键值名称可以取值(数字、字符串、逻辑值、数值、对象、null)
4)json解析
eval()和JSON.parse()代码中不建议用eval()特别是他执行的第三方json数据,很容易引进危险代码,尽可能使用JSON.parse()方法解析字符串本身,该方法还可以捕捉json中错误
5)在线json校验工具——jsonlint.com
在我们响应的json的服务器请求中,我们经常有个返回值确认是是否成功,这个值一般都是约定好的
6jQuery中的ajax实现
$.ajax({
type:
url:
data:
datatype:
success:
error:
})
7.跨域请求
当协议,子域名,主域名,端口号中任意一个都不是一个的时候,都是跨域
不同跨域的几种处理方法
1)通过同域名的web服务器创建一个代理
2)jsonp处理方式
$.ajax({
type:"GET",
url:
data:
datatype:"jsonp"
jsonp:"callback"
success:
})
3)html5de XHR2已经实现跨域请求,但是不兼容IE10以下的版本
header(“Access-control-Allow-origin:")
header(“Access-control-Allow-Methods:POST-GET
”)

打开App,阅读手记
5人推荐
发表评论
随时随地看视频慕课网APP