Ajax全接触

AJAX全称：Asynchronous JavaScript And XML，异步的JavaScript和XML

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

ajax:的作用，通过在后台和服务器进行少量的数据交换，网页就可以实现异步局部更新

1、利用html+css来实现页面，表达信息；

2、用XMLHttpRequest和web服务器进行数据的异步交换

3、运营js操作DOM，实现动态局部刷新；

 XMLHttpRequest对象的出现分割了同步和异步。XMLHttpRequest出现之前是同步的，出现之后是异步的。

 

同步：页面请求实时传给服务器，导致必填数据没有填的时候，要回到页面上重新从头填写，耗时长、客户体验差。

异步：在页面必填项写上必填选项，不用通过传给服务器判断必填内容是否已经填写完整，耗时短、用户体验强。

-同步:填写表单累死人。。客户端和服务端堵塞

-异步:有错误的地方会被标记起来，客户端和服务端不堵塞

 

 

 

XMLHttpRequest对象；实例化一个对象就可以实现异步操作；

var request = new XMLHttpRequest();  //实例化

//可以兼容IE7+，Firefox,Chrome,Opera,Safari...但是不兼容IE6以下的版本。

var request;

if(window.XMLHttpRequest{

    request=new XMLHttpRequest();

)else

 request=new ActiveXObject("Microsoft.XMLHTTP");//可以兼容IE6、IE5版本

 

 

一个完整的http请求过程

1 建立TCP连接

2 Web浏览器向Web服务器发送请求命令

3 Web浏览器发送请求头信息

4 Web服务器应答

5 Web服务器发送应答头信息

6 web服务器向浏览器发送数据

7 Web服务器关闭TCP

 

http是一种无状态的协议，完成一次请求服务器的通信后没有记忆

 

 

Get与post

Get：安全，用来查询，发送可见，url传递，大小有限

Post：不可见，发送表单

 

http状态码

 

HTTP：是计算机通过网络进行通信的规则

HTTP是一种无状态的协议，无状态：不建立持续的链接，服务端不保留连接信息

 

一个HTTP请求由四部分组成：

1）HTTP请求的方法或动作，比如是GET请求还是POST请求

2）正在请求的URL

3）请求头，包含一些客户端环境信息、身份验证信息等

4）请求体，请求正文包含客户端提交的表单信息等

PS：请求头和请求体之间有空一行，表示请求头的结束和请求体的开始

 

【幂等】:一个操作任意多次执行所产生的影响均与一次执行的影响相同，GET请求就是一种幂等操作。

 

一个HTTP响应由三部分组成：

1）状态码：由数字和文字组成的，用来显示请求是成功还是失败

2）响应头：和请求一样包含许多有用的信息，如服务器类型、日期时间、内容类型和长度等

3）响应体：响应正文

 

 

XMLHttpRequest发送请求的两个方法：

1、open(method,url,async)

method：发送请求的方式是get还是post,不区分大小写，一般来说用大写

url：请求地址(相对地址或绝对地址)

async:false(同步)/true(异步)，不填写默认值是true

2、send(string):把请求发送到服务器（如果使用get发送请求，该参数可不填或null，若使用post发送请求，则需要填写）

 

 

XMLHttpRequest获取响应的方法：

1、responseText：获取字符串形式的响应数据

2、responseXML：获取XML形式的响应数据

3、status和statusText：以数字和文本形式返回HTTP状态码

4、getAllResponseHeader()：获取所有的响应报头

5、getResponseHeader()：查询响应中某个字段的值

6、readState属性：有以下值

0—请求未初始化，open还没有调用

1—服务器连接已建立，open已经调用

2—请求已接受，即接收到头信息

3—请求处理中，即接收到响应主体

4—请求完成，且响应已就绪，即响应完成了

 

例子：

var request = new XMLHttpRequest() //建立XHR对象

request.open("GET","get.php",true);  //用get方法异步打开get.php

request.send(); //发送请求头信息

request.onreadystatechange=function(){

if(request.readState===4&&request.status===200){

//做一些事情 request.responseText;

}}

 

php可以运行于各种操作系统平台，兼容几乎所有的web服务器，支持几乎所有的数据库

 

JSON基本概念：

JSON：javaScript对象表示法（JavaScript Object Notation）

JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成

JSON是独立于语言的，也就是说不管什么语言，都可以解析json，只需要按照json的规则来就行

 

JSON和XML比较

JSON的长度和XML格式比起来很短小

JSON读写的速度更快

JSON可以使用JavaScript内建的方法直接进行解析，转换成JavaScipt对象，非常方便

 

 

 

eval() 较危险，不光解析了字符串，还解析了js方法，无论何时用eval()都是非常危险的。-----不建议使用

JSON.parse()较好，会解析出错误。

//例子：首先定义了JSON字符串jsondata

用eval()不会看json是否合法，eval非常危险。所以尽量使用JSON.parse方法，来解析json里的字符串，而且还可以解析出json里的一些错误。

 

2、json校验工具jsonlint

{

"staff": [{

"name": "洪七",

"age": 70

}, {

"name": "郭靖",

"age": 35

}, {

"name": "黄蓉",

"age": 30

}]

}

 

jquery.ajax(type,url,data,dataType,success,error)

 

 

跨域：

HTTP默认访问80端口
HTTPS默认访问443端口
所以http访问https肯定是跨域

 

 

处理跨域的方法：

跨域处理，三种方法：

1、处理跨域方法一   代理

通过在同域名下的web服务器端创建一个代理：

北京服务器(域名:www.beijing.com)

上海服务器(域名：www.shanghai.com)

比如在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shanghai.com/services.php)的服务，然后再把访问结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

2、处理跨域方式二——JSONP(只支持GET请求)：

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':'xx','age':24})

3、处理跨域的方法三——XHR2：

1、HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能

2.IE10以下的版本都不支持

3.在服务器端

header('Access-Control-Allow-Origin:*');

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