Ajax全接触

JavaScript

1、AJAX全称：
Asynchronous JavaScript and XML.(异步的JavaScript和XML)
不是某种编程语言，而是一种无需加载整个网页的情况下能够更新部分网页的技术。
2、同步

3、异步

增加了一个对象：XMLHttpRequest.后台与服务器进行数据交换而不加载整个页面。
4、 实现异步步骤
① 运用HTML和CSS来实现页面，表达信息；
② 运用XMLHttpRequest和WEB服务器进行数据的异步交换；
③ 运用JavaScript操作DOM，实现动态局部刷新。
5、XMLHttpRequest对象
实例化一个XHR对象：

var request = new XMLHttpRequest();

兼容性考虑

var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();//IE7+,firefox,chrome,opera,safari...
}else{
request = new ActiveObject("Microsoft.XMLHTTP");//IE6,IE5
}

6、HTTP请求
http：计算机通过网络进行通信的规则。是一种无状态协议（不建立持久的连接）。
HTTP请求步骤：

• 建立TCP连接
• Web浏览器向Web服务器发送请求命令
• Web服务器发送请求头信息
• Web服务器应答
• Web服务器发送应答头信息
• Web服务器向浏览器发送数据
• Web服务器关闭TCP连接

一个Http请求一般由四部分组成：
① HTTP请求的方法或动作，比如GET、POST
② 正在请求的URL，得知请求的地址
③ 请求头，包含一些客户端环境信息，身份验证信息等
④ 请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等

一般请求头与请求体之间有一个空行，表示请求头已经结束，接下来是请求体
例如：

请求：
GET:一般用于信息获取（默认），用于查询时不会修改数据，在这一方面是安全的；使用URL传递参数，对任何人都有见。对所发送的信息的数量有限制，一般在2000个字符。
GET请求是幂等的:请求执行一次与一万次得到的结果都是相等的。

POST：一般用于修改服务器上的资源（安全），对所发送信息的数量无限制

HTTP响应：
① 一个数字和文字组成的状态码，用于显示请求是成功还是失败
② 响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型，日期时间，内容类型个长度等。
③ 响应体，也就是响应正文，服务器传过来的字符串、代码等

例如：

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

7、XHR对象发送请求
方法：

open(method,url,async)
method:规定是get还是post。一般大写
url:请求地址，可以使相对地址
async：同步还是异步。一般默认为true，异步请求
send(string):把请求发送到服务器
可以有一个参数，使用GET时参数可不填写，但是用POST时一定要有参数。

例如：

request.open("GET","get.php",true);
request.send();
request.open("POST","post.php",true);
request.send();
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //设置http的头信息，告诉服务器要发送一个表单。不发送文件一般使用这种方法。且位置不能在send()后面。
request.send("name=张三&sex=男");

8、XHR获取相应

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

如何知道响应成功返回？

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

监听：

var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange = function(){
if(request,.readyState === 4 && request.status === 200){
//DO something (request.response.Text)
}
}

9、PHP

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

运行与各种平台，能够运行各种web服务器，能够支持几乎所有的数据库

XAMMP的使用

PHP代码：

以<?php 开头，以?>结尾
默认文件扩展名是.php
php语句以分号结尾；

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

JSON与XML比较：

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

JSON语法规则：

JSON数据的书写格式是：名称/值对
    名称/值组合中的名称写在前面（在双引号中），值对写在后面（同样是双引号中），中间用冒号隔开。例如："name":"张三"
JSON的值可以使下面这些类型：
    数字（整数或浮点数），比如123，321
    字符串（在双引号中）
    逻辑值（true或false）
    数组（在方括号内）
    对象（在花括号内）
    null

JSON解析
eval和JSON.parse
在代码中使用eval是很危险的！特别是用它执行第三方的json数据（其中可能包含恶意代码）时，尽可能使用JSON.parse()方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。

JSONLint：JSON格式化校验

11、用jQuery实现Ajax

jQuery.Ajax([settings])
type:   类型，"POST"或"GET",默认为"GET"
url:    发送请求的地址
data:   是一个对象，连同请求发送到服务器的数据
dataType:   预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为"json"
success:    是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串
error： 是一个方法，请求失败是调用此函数。传入XMLHttpRequest对象

12、跨域
一个域名的组成：

http://     www     .   abc.com     :   8080    /   script/jQuery.js
协议        子域名      主域名          端口号      请求资源地址

当协议，子域名，主域名，端口号中任意一个不相同时，就算做不同的域。
不同的域之间相互请求资源，就算是跨域。
比如：http://www.abc.com/index.html请求http://www.efg.com/service.php

什么是跨域？

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。简单的理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.com域名下的对象。

处理跨域方法一：代理
通过在同域名的web服务器创建一个代理。

处理跨域方法二：JSONP
JSONP可用于解决主流浏览器的跨域数据（GET）访问问题
在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':'20'});

处理跨域方法三：XHR2
HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能
IE10以下的版本不支持
在服务器端做一些小小的改造即可；

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');

IE如何实现跨域？
JavaScript跨域总结与解决办法