Ajax总结

Ajax总结
Ajax全解析

Ajax的概述

ajax的概念

Ajax 即 Asynchronous Javascript And XML,Ajax不是一门新的语言,而是对现有技术的综合利用。本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

异步的概念

指某段程序执行时不会阻塞其他程序的执行,其表现形式为程序的执行顺序不依赖本身的书写顺序,相反则为同步。

通俗来讲就是执行一件事情的同时可以执行另一件事情,从而提高整体的效率。

其优势在于不阻塞程序的执行,从而提高整体执行效率。

浏览器请求服务器的过程
1. 打开浏览器
2. 输入请求地址
3. 敲回车发送请求
Ajax请求服务器的过程
1. 创建ajax对象
```
var xhr = new XMLHttpRequest();

XMLHttpRequest 是浏览器内置对象,用于在后台与服务器通信(交换数据),由此我们便可以实现对网页的
```
2. 创建新的http请求(并设置请求地址)
```
 xhr.open('get','./02.php');

 xhr.open(请求方式get/post,url请求地址)
 post方式发送请求时 需要设置请求头
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 get请求可以不设置
 
 调用open()方法并不会真正发送请求,而只是启动一个请求已被发送
```
3. 发送请求给服务端
```
 xhr.send(null) (get请求方式时)
 或 xhr.send('name = jim') (post请求方式时)

 post方式发送请求时 需要设置信息
 get方法发送请求时 信息拼接到url地址中
 xhr.open('get','http://网址/index.php?name=tom&age=23&addr=sh<br/>')
```
4. 给ajax设置事件
```
 xhr.onreadystatechange = function(){
     if(xhr.readyState == 4 && xhr.status == 200){
         console.log('xhr' + xhr.responseText);
        	 //xhr.responseText是从请求地址中请求到的数据 
     }
 }

 onreadystatechange 是js中的事件的一种 存储函数或函数名,其意义在于监听,每当 readyState 属性改变时，就会调用该函数。

 xhr.readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
 	0: 请求未初始化 
 	1: 服务器连接已建立 
 	2: 请求已接收 
 	3: 请求处理中 
 	4: 请求已完成，且响应已就绪
 由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

 获取状态行
 	xhr.status 状态码
 		200: "OK"
 		404: 未找到页面
 	xhr.statusText 状态码信息

 获取响应头
 	xhr.getResponseHeader('Content-Type');
 	xhr.getAllResponseHeaders();

 响应主体
 	xhr.responseText
 	xhr.responseXML
 我们需要检测并判断响应头的MIME类型后确定使用reauest.responseText或者request.responseXML
```
Ajax中的API详解
- xhr.open() 发起请求，可以是get、post方式
- xhr.setRequestHeader() 设置请求头
- xhr.send() 发送请求主体get方式使用xhr.send(null)
- xhr.onreadystatechange = function () {} 监听响应状态
- xhr.status表示响应码，如200
- xhr.statusText表示响应信息，如OK
- xhr.getAllResponseHeaders() 获取全部响应头信息
- xhr.getResponseHeader('key') 获取指定头信息
- xhr.responseText、xhr.responseXML都表示响应主体
get请求和post请求的区别

1. 给服务器传递的数据量
1. get方式的大小是受限于浏览器,每个浏览器的限制不一样,大部分浏览器是2k的限制 chrome就是8k
  
  post原则没有限制,php.ini对其限制为8M
2. 安全方面:post传递数据较安全。
3. 传递数据的形式不一样
  
  get没有请求主体,以xhr.send(null)形式发送请求
  get方式在url地址后边以请求字符串形式传递参数
  
  http://网址/index.php?name=tom&age=23&addr=sh
  
  问号后面就是请求字符串,用问号连接网址与数据请求字符串一般是"名-值"的键值对,中间使用&符号连接
  
  post方式是把form表单的数据请求出来以xml形式传递给服务器
  post可以通过xhr.send('name=tom&age=19')形式发送请求
4. post需要设置请求头 get不需要设置
  
  xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
数据格式

XML
1. XML 是可扩展标记语言（Extensible Markup Language）的缩写，其中的标记（markup）是关键部分。XML 可以创建内容，然后使用限定标记标记它，从而使每个单词、短语或块成为可识别、可分类的信息。您创建的文件，或文档实例由元素（标记）和内容构成。
2. 虽然可以描述和传输复杂数据,但是其解析过于复杂并且体积较大,所以实现开放已经很少使用了
3. 特点
- 必须要有根元素 (root)
- 不能以空格,数字或者"."开头,对大小写敏感
- 不能交叉嵌套
- 属性双引号
- 特殊符号要使用实体
- 注释和HTML一样
1. 格式
```
 <?xml version="1.0" encoding="UTF-8"?>
 <root>
     <arrayList>
         <array>
             <src>images/banner.jpg</src>
             <newPirce>12.00</newPirce>
             <oldPrice>30.00</oldPrice>
         </array>
         <array>
             <src>images/banner.jpg</src>
             <newPirce>12.00</newPirce>
             <oldPrice>30.00</oldPrice>
         </array>
     </arrayList>
 </root>
```
JSON
1. JavaScript Object Notation,另一种轻量级的文本数据交换格式,独立于语言。
2. 特点:
- 数据在键值对中
- 数据用","分开,最后一个数据不能带","
- "[]"保存数组,"{}"保存对象
- 键和值都必须用""包裹
1. 格式
```
 [
     {"src":"images/detail01.jpg","oldPrice":"10.12","newPrice":"130.00"},
     {"src":"images/detail02.jpg","oldPrice":"1.00","newPrice":"11.00"},
     {"src":"images/detail03.jpg","oldPrice":"100.00","newPrice":"1000.00"}
 ] 
```
JSON数据的解析

json字符串和php对象之间的相互转换
1. 把php对象转化成json格式的字符串 -- json_encode
```
 $jsonStr = json_encode($phpArr);
```
2. 把json字符串解析成php对象 -- json_decode
```
 $jsonObject = json_decode($jsonStr);
```
json字符串和json对象之间的相互转化
1. json字符串转化成json对象 -- JSON.parse
```
 var jsonStr = '[{"name":"jim","age":"10"}]';	
 var jsonObj = JSON.parse(jsonStr);
```
2. json对象转化成json字符串 -- JSON.stringify
```
 var jsonObj = {name:'jim',age:10};
 var jsonStr = JSON.stringify(jsonObj);
```
jQquery中的Ajax

jQquery为我们提供了更强大的Ajax封装
```
$.ajax({
        type: 'post'/'get',
        url: '发送请求的地址',
        data: '是一个对象,连同请求发送到服务器的数据',
        //dataType是预期服务器返回的数据.如果不指定,jq将自动根据HTTP包MIME信息来智能判断,一般我们使用json格式
        dataType:'json',
        beforeSend: function () {
            //发送请求前就调用的函数
        },
        success: function (data) {
            //请求成功时的回调函数
            //传入返回后的数据,以及包含成功代码的字符串
            //data是从后台获得的数据
        },
        complete: function () {
            //请求完成时的调用函数
        },
        error: function (err,errmsg) {
            //请求出现错误时的调用函数
            //传入XMLHttpRequest对象
        }
    });
```
HTTP协议

HTTP是一种无状态协议

HTTP请求的过程

一个完整的HTTP请求过程，通常有下面7个步骤
1. 建立TCP连接
2. web浏览器向web服务器发送请求命令
3. web浏览器发送请求头信息
4. web服务器应答
5. web服务器发送应答头信息
6. web服务器向浏览器发送数据
7. web服务器关闭TCP连接
HTTP请求的构成

一个HTTP请求一般由四个本分组成
1. HTTP请求的方法或动作，比如是get还是post请求
2. 正在请求的URL，即请求的地址
3. 请求头，包含一些客户环境信息，身份验证信息等
4. 请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等
HTTP响应的组成

一个HTTP响应一般由三个部分组成
1. 状态码：由数字和文字组成，用来显示请求成功还是失败
2. 响应头：包含很多信息，例如服务器类型，日期时间，内容类型和长度等
3. 响应体：也就是响应正文
同源&跨域

同源策略

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

同源

一个域名的组成：协议子域名主域名端口号请求资源地址
当协议，子域名，主域名。端口号都相同时才算同源有任意一个不相同时，都算作不同域。

跨域

不同域之间相互请求资源，就算作“跨域”。浏览器出于安全方面的考虑，不允许跨域调用其他页面的对象。

处理跨域的方法

一.代理

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

二. JSONP

JSON Padding

JSONP可用于解决主流浏览器的get请求中跨域数据访问的问题

原理：其本质是利用了标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。
```


<script>
    function fuc(data){
        console.log(data.name);
    }
</script>
<script src="http://www.guangzhou.com/api.php?callback=fuc"></script>




$.ajax({
        type: 'post'/'get',
        url: '发送请求的地址',
        data: '是一个对象,连同请求发送到服务器的数据',
        //dataType是预期服务器返回的数据.如果不指定,jq将自动根据HTTP包MIME信息来智能判断,一般我们使用json格式

		

        dataType:'jsonp',
		
		
		jsonp:'callback',
		
        beforeSend: function () {
            //发送请求前就调用的函数
        },
        success: function (data) {
            //请求成功时的回调函数
            //传入返回后的数据,以及包含成功代码的字符串
            //data是从后台获得的数据
        },
        complete: function () {
            //请求完成时的调用函数
        },
        error: function (err,errmsg) {
            //请求出现错误时的调用函数
            //传入XMLHttpRequest对象
        }
    });
```
三. XHR2
- HTML5提供的XMLHttpRequest Level已经实现了跨域的访问及其他的一些新功能
- IE10以下版本都不支持
- 在服务端做一些小小的改造即可
  
  header('Access-Control-Allow-origin:*');
  header('Access-Control-Allow-Method:POST,GET');
相关阅读:
数学笔记目录
 机器学习笔记目录
 物理学笔记目录
 二阶递推公式的通项公式
 分析Analysis 笔记
 从傅里叶变换到小波变换
 电动力学期末复习
 电动力学期中复习
 热学期中复习
 理论力学第一章 Lagrange方程
原文地址：https://www.cnblogs.com/sweetBug/p/5828024.html

Ajax全解析

Ajax的概述

ajax的概念

异步的概念

浏览器请求服务器的过程

Ajax请求服务器的过程

Ajax中的API详解

get请求和post请求的区别

1. 给服务器传递的数据量

数据格式

XML

JSON

JSON数据的解析

json字符串和php对象之间的相互转换

json字符串和json对象之间的相互转化

jQquery中的Ajax

jQquery为我们提供了更强大的Ajax封装

HTTP协议

HTTP是一种无状态协议

HTTP请求的过程

HTTP请求的构成

HTTP响应的组成

同源&跨域

同源策略

同源

跨域

处理跨域的方法

一.代理

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

二. JSONP

JSON Padding

三. XHR2