AJAX详细介绍以及跨越

1、AJAX
1.Ajax作用
在无刷新页面的情况下，可以更新页面的部分内容。
2.Ajax核心点
1)创建 XMLHttpRequest 对象
分为低版本ie和非ie两种
new XMLHttpRequest();
new ActiveXObject(‘Msxml2.XMLHTTP’) ;

2)核心属性 — readyState
0-4 一共5个值
0: 创建了ajax对象
1: 准备ajax请求 — open
2: 发送ajax请求 — send
3: 接收了部分返回数据
4: 完整接收了 后台返回的数据

3)核心方法
open(var1, var2, var3); 准备ajax请求
var1: 请求方式 post get
var2: 请求的后台程序地址
var3: 同步(false)/异步(true 默认)

send(var);
get请求: null
post请求:
①准备发送到后台的参数 — string
var str = ‘key=value&key1=value…’
②转换格式
xhr.setRequestHeader(‘content-type’, ‘application/x-www-form-urlencoded’);

4)其他属性和事件
responseText: 以字符串形式接收后台返回的数据
onreadystatechange: readyState每次发生变化时触发该事件，一共触发4次

3.一般Ajax程序编写方式
1)在前端的html页面中发送ajax请求
①一般会使用一种事件来触发ajax请求 （点击事件、鼠标悬浮事件、键盘弹起事件等等。。。）
②获取需要发送给后台的数据，岁ajax一起发生到后台
③等待返回数据

2)编写后台php程序，查询需要数据，将找到的数据返回给前台
返回给前台的数据肯定是字符串

3)修改前端的程序，来将接收到的数据显示到网页上
后台返回的数据基本是3种:
字符串
json （后台返回的是一维关联数组）
数组，内部是json对象 (后台返回的是二维数组)

4.模板引擎
模板引擎: 拼接字符串

1)引入template-web.js库文件
2)定义模板

3)准备拼接到模板字符串中的数据 — json
var json = {‘aaa’: str};
var json_obj = {‘bbb’: arr};

4)调用template函数将数据和模板字符串进行拼接
var str = template(‘tpl’,json_obj );

5)将拼接好的字符串显示到需要位置 — DOM操作

5.ajax无刷新表单提交
1)DOM+ajax
DOM获取表单中的数据
2)FormData对象
优点: 一次性获取到表单中的所有域的数据，包括文件域
①获取表单对象 — DOM对象 document.getElementById $(‘form’)[0]
②实例化FormData对象，并将表单对象作为参数传入
var fd = new FormData(fm);
③发送ajax请求
i.必须有post来方式发送
ii.不需要使用setRequesHeader来转换数据
iii.将 fd 作为参数传入 send方法

3)大文件上传进度条
onprogress: XMLHttpRequest —> XMLHttpRequestUpload --> onprogress
大约每100ms触发一次
调用该事件时，可以传递一个事件对象 evt
evt中两个属性： loaded 已上传文件的大小 total 上传文件的总大小
evt.loaded/evt.total 利用该比值就可以绘制进度条

6.jQuery中的ajax方法
$.get(var1, var2, var3, var4);
var1： 请求的后台页面的地址
var2： 发送到后台的数据 — json
var3： readyState=4时的回调函数，该函数中有一个参数，接收后台返回的数据
var4： 设置返回值的数据类型 text json xml

$.post(var1, var2, var3, var4);

$.ajax(obj);
url: 请求的地址
type: 请求类型
data: 发送到后台的数据
dataType: 设置返回数据的类型 text json xml jsonp
succees: readyState=4时的回调函数，该函数中有一个参数，接收后台返回的数据

cache: 是否缓存，get请求时才设置。 true（缓存） false（不缓存）
async: 同步(false)/异步(true)

如果使用FormData对象，必须设置下面两个配置项为false
contentType: false
processData: false

7.自己封装ajax
先实现一个具体的案例，然后再将案例的数据用参数来代替
1)使用get方式发送一个ajax请求，请求1.php文件
2)将上步完成代码，整体封装到方法中
写完这步之后，分析一下有什么缺陷

8.Ajax跨域
网站A要调用网站B的数据。
因为浏览器的同源策略，浏览器会阻止返回数据的使用。
解决方案:
1)服务器代理
2)cors
3)jsonp

1)服务器代理
核心: file_get_contentes函数，跨域请求到其他网站的文件
①www.study.com域 index.html 文件 发送ajax请求， 请求www.study.com/file.php
②www.stduy.com/file.php 文件 file_get_contents(‘http://www.demo.com/a.php’);
③a.php返回给file.php，file.php返回给index.html

2)cors
header(‘Access-Control-Allow-Origin:*’);

3)jsonp
核心思想： 利用 src和href属性可以跨域的漏洞

b.php
echo ‘aaa(123)’;

4)$.ajax方法的jsonp
$.ajax({
url:
type: ‘get’,
data: {},
dataType: ‘jsonp’,
jsonp: ‘fn’ //callback
success: function(msg){

}
})

//接收函数名
$fn = $_GET[‘fn’];
echo $fn.”(123)”

1-1、文件上传
在XMLHttpRequest对象中有一个XMLHttpRequestUpload对象，该对象有一个onprogress事件，改事件每100毫秒触发一次，可以使用改时间来检测当前已经上传的文件有多少了。

在这里XMLHttpRequestUpload是个类，而uoload是这个类个对象
1-2 ajax请求方法 JQUERY提供了4中方法
1-2-1、$.get()四个参数Var1请求后台程序的地址Var2要发送到后台程序的数据，json格式Var3当readystate==4时的函数触发，改函数中还有一个参数，就是后天程序返回的数据Var4设置返回数据的类型默认text字符串类型的json返回的数组或者类数组维数组XML很少用1-2-2、$.post()

1-2-3、$.ajax()

1-2-4、$.getJSON()

2、AJAX跨域
2-1、服务器代理

在同源目录下创建一个文件 请求自己这个域的

创建PHP文件 请求远端的文件

创建远端请求的文件

2-1、jsonp跨域

2-2、cors跨域
cors: 跨域资源共享。
同源策略是浏览器的策略。但是如果服务器允许其他网站的页面进行跨域访问，那么浏览器就不会对返回的数据进行限制了。

核心方法: 在服务器端(PHP文件中)声明不用进行同源限制

如果设置为*则是所有外部网站都可以获取数据
header(‘Access-Control-Allow-origin: *’);

只允许www.study.com网站访问并获取数据
header(‘Access-Control-Allow-origin:http://www.study.com’);

案例:
www.study.com/cors/index.html通过cors方式，访问www.demo.com/cors.php文件的数据
1)创建 www.study.com/cors/index.html文件 发送ajax请求

2)创建 www.demo.com/a.php