20150804 Ajax基础

Ajax不是某种编程语言，是一种在无需重新加载整个网页的情况之下能够更新部分网页的技术。而传统的网页在更新时需要重新载入。

创建XMLHttpRequest对象

实例化对象
var request=new XMLHttpRequest();
如何兼容IE5或者IE6
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari...
}else{
reques=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5

}

HTTP

HTTP是计算机通过网络进行通信的规则
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、响应体，也就是响应正文

状态码

1XX信息类，表示收到Web浏览器请求，正在进一步的处理中
2XX成功，表示用户请求被正确接受，理解和处理例如：200 OK
3XX重定向，表示请求没有成功，客户必须采取进一步的动作
4XX客户端错误，表示客户端提交的请求有错误，例如：404NOT
FOUND请求中所引用的文档不存在
5XX服务器错误，表示服务器不能完成对请求的处理，如500

XMLHttpRequest发送请求

open(method,url,async)
method方法，get或者post，async是否异步，异步true同步false
send(string)
string 参数get时为空post时写参数
request.setRequestHeader("Content-type","application/x-www-form-urlencoded);
必须写在send之前open之后,否则将抛出异常

XMLHttpRequest取得响应

responseText获得字符串形式的响应数据
responseXML获得XML形式的响应数据
status statusText以数字和文本形式返回HTTP状态码
getAllResponseHeader()获取所有的响应报头
getResponseHeader()查询响应中某个字段的值

readyState属性

0请求未初始化，open还没有调用
1服务器连接已建立，open已经调用
2请求已接受，也就是接收到头信息了
3请求处理中，也就是接收到响应主体了
4请求已完成，且响应已就绪，也就是响应完成了

PHP

PHP创建动态交互性站点的服务器端脚本语言
能够生成动态页面内容
能够创建、打开、读取、写入、删除以及关闭服务器上的文件
能够接收表单数据
能够发送并取回cookies
能够添加、删除、修改数据库中的数据
能够限制用户访问网站中的某些页面


运行PHP
XAMMP,https://www.apachefriends.org/download.html
测试PHP
Fidder,http://www.telerik.com/download/fiddler

JSON

JavaScript对象表示法（JavaScript Objec Notation)

JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成。
JSON是独立于语言的，也就是说不管什么语言，都可以解析json,只需要按照JSON的规则来就行


JSON与XML的比较
JSON的长度和XML格式比起来很短小
JSON读写的速度更快
JSON可以使用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便


JSON语法规则
数据的书写格式：名称/值对
名称/值对组合-- 名称：值对(多组用，隔开)
值的类型：数字（整数或浮点数）、字符串（双引号中）、逻辑值（true,false）、数组（方括号）、对象（花括号中）、Null


JSON解析
eval和JSON.parse
在代码中使用eval是危险的！特别是用它执行第三方的JSON数据（其中可能包含恶意代码）时，尽可能使用JSON.parse()方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。
eg:eval('('+jsondata+')')/JSON.parse(jsondata)
eval不仅解析字符串，还解析其中的方法。
JSON.parse会先判断数据是否合法


JSON在线校验工具jsonlint.com


用JQuery实现Ajax
百度在线资源库：http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js
见JQuery进阶学习笔记
未包含的：
error:function(jqXHR){
alert("发生错误："+jqXHR.status);
}

跨域

域名地址的组成：
协议    子域名  主域名    端口号    请求资源地址
http://  www.  abc.com :  8080  scripts/jquery.js
当协议、子域名、主域名、端口号任意一个不相同时，都算作不同域。
不同域之间相互请求资源就算做“跨域”


JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象


处理跨越的方法
方法一：通过在同域名的WEB服务器创建一个代理
eg：www.shanghai.com/service.php、www.beijing.com/proxy-shanghaiservice.php
即在后者的web服务器后台来调用前者服务器的服务，然后再把相应结果返回给前端，这样前端用后者同域名的服务就和嗲用前者的服务效果相同了。


方法二：JSONP解决主流浏览器的跨域数据访问的问题,支持GET不支持POST
eg：在www.aaa.com页面中
<script>
function jsonp(json){
alert(json["name"]);
}
</script>
<script src="http://www.bbb.com/jsonp.js"></script>
在www.bbb.com页面中
jsonp({'name':'洪七','age':24});


方法3：XHR2
HTML5提供的XMLHttpRequest Level2 已经实现了跨域访问以及其他的一些新功能
在服务器端做一些小小的改造即可
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Meghods:POST,GET');
IE10以下的版本都不支持