ajax 的理解
AJAX -- Asynchronous JavaScript And XML ,异步 JavaScript 和 XML。ajax 的语言载体是 javascript。
AJAX 涵盖了五方面的内容:
1. 使用 XHTML 和 CSS 的基于标准的表示技术
2. 使用 DOM 进行动态显示和交互
3. 使用 XML 和 XSLT 进行数据交换和处理
4. 使用 XMLHttpRequest 进行异步数据检索
5. 使用 JavaScript 将以上技术融合在一起
AJAX 能做什么:
1. 改善表单验证方式,不再需要打开新页面,也不再需要将整个页面数据提交
2. 不需刷新页面就可以改变页面内容,减少用户等待时间
3. 按需获取数据,每次只从服务器端获取需要的数据
4. 读取外部数据,进行数据处理整合
5. 异步与服务器进行交互,在交互过程中用户无需等待,仍可继续操作
AJAX 的使用:
1. 创建 ajax 对象
1.1 主流浏览器(火狐,google,苹果safari,opera,IE7+)方式
var xhr = new XMLHttpRequest();
1.2 IE(6/7/8)方式
var xhr = new ActiveXObject("Microsoft.XMLHTTP"); //最原始方式
var xhr = new ActiveXObject("Msxml2.XMLHTTP"); //升级
var xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //升级
var xhr = new ActiveXObject("Msxml2.XMLHTTP.5.0"); //升级
var xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0"); //最高版本方式(停止维护)
自动识别浏览器:
if ( typeof XMLHttpRequest != "undefined" ) { ... }
兼容:
var xhr;
if( winodow.XMLHttpRequest ) {
xhr = new XMLHttpRequest(); /ie7, firefox, chrome, opera, safari ...
} else {
xhr = new ActiveObject("Microsoft.XMLHTTP"); // ie5,6
}
2. 发起对服务器的请求
3. 接收服务器返回的信息
浏览器可以接收的信息 ajax 都可以接收,例如字符串、html 标签、css 样式内容、xml 内容、json 内容等。
4. get 和 post 方式的 ajax 请求
-------------------------------------------------------------------------------------------------------
什么是HTTP
http 是计算机通过网络进行通信的规则。主要使浏览器能够从服务器请求信息和服务。http 是一种无状态的协议,无状态是不建立持久的连接,也就是说服务端不保留连接的一些相关信息。一个客户端向服务器发送 web 请求,然后 web 服务器返回响应,接着连接就会关闭了,这个处理过程是没有记忆的,如果后续处理需要之前传递的一些信息,那就需要重新的传递。
一个完整的 HTTP 请求过程,通常有7个步骤:
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 个字符
发送的信息对任何人都是可见的,因为所有的变量名和值都显示在 url 中
POST:
一般用于修改服务器上的资源,如发送表单数据,新建、修改、删除等
对所发送信息的数量无限制
一个 HTTP 响应一般由三部分组成:
1. 一个数字和文字组成的状态码,用来显示请求成功还是失败
2. 响应头,响应头也和请求头一样包含许多有用的信息,如服务器类型、日期时间、内容类型和长度等
3. 响应头,也就是相应正文
如:
HTTP/1.1 200 OK
Date: Sun, 23 Nov 2014 10:14:45 GMT
Server: Apache
Content-Encoding: gzip
Content-Length: 7112
Connection: Keep-Alive
Content-Type: application/javascript
HTTP 状态码由3位数字构成,其中收尾数字定义了状态码的类型:
1XX: 信息类,表示收到 web 浏览器请求,正在进一步的处理中
2XX: 成功,表示用户请求被正确接收,理解和处理,例如 200 OK
3XX: 重定向,表示请求没有成功,客户必须采取进一步的动作
4XX: 客户端错误,表示客户端提交的请求有错误,例如 404 NOT Found,意味着请求中所引用的文档不存在
5XX: 服务器错误,表示服务器不能完成对请求的处理,如 500
-----------------------------------------------------------------------------------------------------------------
XMLHttpRequest 发送请求:
- open ( method, url, async ) (发送请求方法,请求地址,请求同步/异步)
- send ( string )
- 例如:
request.open("GET", "get.php", true);
request.send();
request.open("post", "create.php", true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=jim&sex=male");
XMLHttpRequest 取得响应:
- responseTxt: 获得字符串形式的响应数据
- responseXML: 获得 XML 形式的响应数据
- status 和 statusText: 以数字和文本形式返回 HTTP 状态码
- getAllResponseHeader(): 获取所有的响应报头
- getResponseHeader(): 查询响应中的某个字段的值
- readyState 属性:
0:请求未初始化,open 还没有调用
1:服务器连接已建立,open 已经调用了
2:请求已接收,也就是接收到头信息了
3:请求处理中,也就是接收到响应主体了
4:请求已完成,且响应已就绪,也就是响应完成了
例如:
var request = new XMLHttpRequest();
request.open("GET", "get.php", true);
request.send();
request.onreadystatechage = function(){
if(request.readyState === 4 && request.status === 200) {
// 做一些事情 request.responseText
}
}
---------------------------------------------------------------------------------------------
PHP 是一种创建动态交互性站点的服务器端脚本语言
PHP 能够生成动态页面内容
PHP 能够创建、打开、读取、写入、删除以及关闭服务器上的文件
PHP 能够接收表单数据
PHP 能够发送并取回 cookies
PHP 能够添加、删除、修改数据库中的数据
PHP 能够限制用户访问网站中的某些页面
---------------------------------------------------------------------------------------------
JSON 基本概念:
JSON: javascript 对象表示法(JavaScript Object Notation)
JSON 是存储和交换文本信息的语法,类似 XML。它采用键值对的方式来组织,易于人们阅读和编写,同时也易于机器解析和生成。
JSON 是独立于语言的,也就是说不管什么语言,都可以解析 json,只需要按照 json 的规则来就行
JSON 和 XML 比较:
json 的长度和 xml 格式比起来很短小
json 读写的速度更快
json 可以使用 JavaScript 内建的方法直接进行解析,转换成 JavaScript 对象,非常方便
JSON 语法规则:
JSON 数据的书写格式是:名称/值对
名称/值对组合中的名称卸载前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开,比如" name " : " amy "
JSON 的值可以是下面这些类型:
数字(整数或浮点数),比如 123,1.23
字符串(在双引号中)
逻辑值( true 或 false )
数组(在方括号中)
对象(在花括号中)
null
JSON 解析:
eval 和 JSON.parse
在代码中使用 eval 是很危险的,特别是用它执行第三方的 JSON 数据(其中可能包含恶意代码)时,尽可能使用 JSON.parse() 方法解析字符串本身,该方法还可以捕捉 JSON 中的语法错误。
JSON 校验工具:
JSONLint 地址:jsonlint.com
用 jQuery 实现 Ajax
jQuery.ajax([settings])
type: 类型,“POST” 或 “GET”, 默认为“GET”
url: 发送请求的地址
data: 是一个对象,连同请求发送到服务器的数据
dataType: 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来之能判断,一般我们采用 json 格式,可以设置为 json
success: 是一个方法,请求成功后的回调函数。传入返回后的数据,以及包含成功代码的字符串
error: 是一个方法,请求失败时调用此函数。传入 XMLHttpRquest 对象
jQuery.getJSON(url,data,success(data,status,xhr)) 等价于:
$.ajax({ url: url, data: data, success: callback, dataType: json
});
跨域:
一个域名地址的组成:
http:// www . abc.com : 8080 / scripts/jquery.js
协议 子域名 主域名 端口号 请求资源地址
当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。
不同域之间相互请求资源,就算作“跨域”。比如 http://www.abc.com/index.html 请求 http://www.efg.com/service.php
JavaScript 出于安全方面的考虑,不允许跨域调用其他页面的对象。什么是跨域呢,简单的理解就是因为 JavaScript 同源策略的限制,a.com 域名下的 js 无法操作 b.com 或是 c.a.com 域名下的对象。
比如:www.abc.com/index.html 调用 www.abc.com/service.php -- 非跨域
www.abc.com/index.html 调用 www.efg.com/service.php -- 跨域
www.abc.com/index.html 调用 bbs.abc.com/service.php -- 跨域
www.abc.com/index.html 调用 www.abc.com:81/service.php -- 跨域
www.abc.com/index.html 调用 https://www.abc.com/service.php -- 跨域
处理跨域:
方法一代理:
通过在同域名的 web 服务器端创建一个代理:北京服务器(域名:www.beijing.com)上海服务器(域名:www.shanghai.com)
比如在北京的 web 服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shanghai.com/service.php)的服务,然后再把响应结果返回给前端,这样前端调用北京同域名的服务就和调用上海的服务效果相同了。
方法二JSONP:
JSONP 可用于解决主流浏览器的跨域数据访问的问题。(JSONP的方式只支持 GET 请求,不支持 POST 请求) JSONP 返回的是一个数组。
在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 ' : ' jim', ' age ' : ' 24 '});
方法三 XHR2:
HTML5 提供的 XMLHttpRequest Level2 已经实现了跨域访问以及其他的一些新功能,IE10以下的版本都不支持。
在服务器端做一些小小的改造即可:
header(' Access-Control-Allow-Origin:* ');
header(' Access-Control-Allow-Methods:POST, GET ');