首页 > 代码库 > ajax学习笔记

ajax学习笔记

同步与异步:同步时,客户端提交请求,用户只能等待,服务器端响应,处理,返回数据,刷新页面,
                    异步时,填写信息时,页面就可以向服务器提交请求,服务器响应后就处理请求,然后把结果返回给页面,用户无需等待就可以知道输入是否正确,同时用户可以继续填写内容,无需刷新和提交整个页面。不会造成堵塞。
 
ajax流程:运用HTML+CSS来实现页面,表达信息----运用XMLHttpRequest和web服务器进行数据 的异步交换------运用JavaScript操作DOM,实现动态局部刷新。
 
XMLHttpRequest对象
一:var request = new XMLHttpRequest(); //不兼容IE6及以下
二:
var request ;
if(window.XMLHttpRequest){
    request  = new XMLHttpRequest();//IE7+,ff,chrome,opera,safari
}else{
   request  = new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5
}
 
HTTP
是一种无状态的协议(不建立持久的连接)
是计算机通过网络进行通信的规则;能够使浏览器向服务器请求信息和服务,
一个完整的HTTP请求过程有七个步骤:
1,建立TCP连接;
2,web浏览器向web服务器发送请求命令;
3,web浏览器发送请求头信息;
4,web服务器应答;
5,web服务器发送应答头信息;
6,web服务器向浏览器发送数据;
7,web服务器关闭TCP连接。
 
一个HTTP请求一般包含四部分:
1,HTTP请求的方法和动作,比如GET或者POST
2,正在请求的URL
3,请求头,包含客户端信息,身份验证信息等
4,请求体,包含请求正文,请求正文中可以包含客户端提交的查询字符串信息,表单信息等。
GET:一般用于信息的获取,使用URL传递参数,对所发送的信息的数量有限制,一般在2000个字符,明文可见,不安全;
        幂等===不会因请求的次数而改变,这种情况下,可以说是安全的;
POST:一般用于修改服务器上的资源,对所发送的信息的数量无限制,信息在请求体里,不可见;
 
一个HTTP响应一般有三部分:
1,一个数字和文字组成的状态码,用来显示请求的成功或者失败;
2,响应头,和请求头一样包含许多信息,如服务器类型,日期和时间,内容类型和长度;
3,响应体,响应正文,包括服务器传过来的字符串及HTML等内容
 
 
技术分享
 
 
XMLHttpRequest发送请求
open(method(发送的方法),url(请求的地址),async(是否异步,默认true,可以不填))
send(string)---get时,参数可不填,post时,必填
 
XMLHttpRequest取得响应
技术分享
技术分享
 
想要知道响应是否成功,监听readyState
技术分享
 
 
 
JSON
JavaScript对象表示法,是存储和交换文本信息的语法,类似XML,采用键值对的方式来组织,易于阅读和机器解析;
json是独立于语言的,不管什么语言都可以解析json,只需要按照json的规则即可。
json的长度比xml短小,读写速度更快,可以使用JavaScript內建的方法直接解析,转换成JavaScript对象,非常方便。
json的键值都都需要加引号。
 
JSONLint校验json;
json解析用parse,不用eval
 
一般不会用JavaScript原生编写ajax!
技术分享
 
 
 
 
跨域
技术分享
 
技术分享
技术分享
 
处理跨域一:代理
技术分享
 
处理跨域二:JSONP:不支持post
技术分享
 
处理跨域三:XHR2
技术分享
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

ajax学习笔记