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、 . g e t ( ) 四 个 参 数 V a r 1 请 求 后 台 程 序 的 地 址 V a r 2 要 发 送 到 后 台 程 序 的 数 据 , j s o n 格 式 V a r 3 当 r e a d y s t a t e = = 4 时 的 函 数 触 发 , 改 函 数 中 还 有 一 个 参 数 , 就 是 后 天 程 序 返 回 的 数 据 V a r 4 设 置 返 回 数 据 的 类 型 默 认 t e x t 字 符 串 类 型 的 j s o n 返 回 的 数 组 或 者 类 数 组 维 数 组 X M L 很 少 用 1 − 2 − 2 、 .get () 四个参数 Var1 请求后台程序的地址 Var2 要发送到后台程序的数据,json格式 Var3 当readystate==4时的函数触发,改函数中还有一个参数,就是后天程序返回的数据 Var4 设置返回数据的类型 默认text字符串类型的 json返回的数组或者类数组维数组 XML很少用 1-2-2、 .get()Var1Var2jsonVar3readystate==4Var4textjsonXML122.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

你可能感兴趣的:(ajax)