ajax学习心得

本文为学习慕课网视频http://www.imooc.com/learn/250的学习心得

一、ajax基本概念

ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML），利用回调机制来实现异步请求。

ajax的核心是XmlHttpRequest对象。

一个ajax的实现原理为：
1、利用html和CSS来实现页面，表达信息
2、运用XmlHttpRequest对象来和服务器进行数据交换
3、JavaScript操作DOM，实现局部刷新

二、XMLHttpRequest对象的创建

var request;if(window.XmlHttpRequest){    request = new XmlHttpRequest;//IE7+、FireFox、 Chrome···}else{    request = new ActiveXObject('Microsoft.XmlHttp');//IE6、IE5}

三、XmlHttpRequest发送请求

//请求方式，请求地址，是否异步open(method,url,async);/*请求内容，get请求的请求内容已经拼接在了url后面，所以send没有参数，post请求一定要有参数。*/send(string);

请求方式分为get请求和post请求
http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html
他们之间的区别参见以上这篇文章，我觉得讲得不错。
例子

request.open('get','get.php',true);request.send();

request.open('post','post.php',true);//设置http头信息request.setRequestHeader('Content-type','application/x-www-form-urlencoded');request.send('name=王二狗&sex=男’);

在请求的过程中，需要监听readyState的变化，它的变化代表着请求响应的变化。
readyState
0：请求尚未初始化，open还没有调用
1：服务器连接已建立，open方法已经调用
2：请求已经接收，已经接收到头信息了
3：请求处理中，已经接收到响应的主体了
4：请求已完成，且响应已就绪，就是响应完成了

var request;if(window.XmlHttpRequest){    request = new XmlHttpRequest;//IE7+、FireFox、 Chrome···}else{    request = new ActiveXObject('Microsoft.XmlHttp');//IE6、IE5}    request.open('get' , 'get.php' , true);    request.send()    request.onreadyStateChange = function(){        if(request.readyState === 4 && request.status === 200){        //JS操作DOM局部刷新内容        }    }

三、JSON数据格式
JSON，JavaScript对象表示法(JavaScriptObjectNotation)

JSON和XML比较
1、JSON 长度和XML比起来很短小
2、JSON的读写速度更快，数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
3、JSON可以直接用JavaScript内建的方法进行解析，转化成JavaScript对象。
4、······

JSON解析：eval和JSON.parse

eval

var jsonObi = eval('(' + jsonData + )');

JSON.parse

var jsonObj = JSON.parse(jsonData);

http://www.zhihu.com/question/20591877

四、ajax跨域

JavaScript出于同源策略的限制，不允许跨域的调用其它页面的对象。

跨域的解决方法

1、代理

其实是后端处理的方法

2、JSONP
JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。