Ajax技术
简介
ajax就是在页面没有刷新或者没有跳转的情况下还能更新页面的某一部分数据
- Ajax: Asynchronous javascript and xml (异步javascript和xml)。
- ==Ajax并不是一种新技术，而是已有技术的集合。JavaScript是核心载体==。
- Ajax优势：在不刷新页面的情况下，更新页面数据，提升用户体验。
- ==Ajax就像一个小秘书==，能够实现异步工作。
1-发送Ajax请求-原生方法
实例化ajax对象
var xhr = new ActiveXObject(‘Msxml2.XMLHTTP’);
var xhr = new XMLHttpRequest();
1
2
3
4
5
6
7
8
9
10
11
12
| function getXhr () {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
}
return xmlhttp;
}
|
创建XMLHTTPRequest对象要分为(低版本) IE和==非IE两种方式(主流)==：
IE浏览器（IE7之前） :
var xhr = new ActiveXObject('Msxml2.XMLHTTP');
非IE浏览器（chrome、firefox、safair、搜狗等，包括IE7+之后） (主流浏览器):
var xhr = new XMLHttpRequest();
核心方法
open(var1, var2, var3): 准备Ajax请求
1
2
3
4
5
| var1: 请求方式 get/post
var2: 请求的后端程序地址
var3: 异步(true)/同步(false)，可选参数，默认为true
示例: xhr.open(‘get’, ‘index.php’); //准备以get方式请求后端的index.php文件
|
send(var): 发送ajax请求
1
2
| var: 分为两种情况。 如果是get请求，则填写null。 如果是post请求，则填写要发送到后端的数据。
示例: xhr.send(null);
|
接收后端响应结果
核心属性 — readyState
Ajax的整个过程有5个状态，对应readyState的5个值：0-4
1
2
3
4
5
6
7
8
9
| 0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
|
核心事件
onreadystatechange
onreadystatechange事件: readyState的值每次发生变化都会触发该事件。
其他重要属性
responseText
以字符串形式接收后端程序的返回值。
以PHP为例: PHP程序最终会被解释程序一段字符串，responseText接收的就是这段字符串
响应案例 — index.php
1
2
3
| index.php：返回字符串“Hello Ajax”给前端 --- 就是 echo "Hello Ajax"
index.html： 将Hello Wrold 显示在页面的div中
|
三大步骤:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| 1) 前端静态页面发送ajax请求。
① 创建 XMLHttpRequest 对象
② 调用open方法准备ajax请求
③ 调用send方法发送ajax请求
④ 调用onreadystatechange事件，判断readyState=4时，使用responseText接收后端返回数据
2) 后端php页面，处理请求并返回结果
3) 前端页面接收结果，显示在网页指定位置
|
发送请求案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| 1) 创建按钮，绑定点击事件
2) 创建XMLHttpRequest对象
3) 调用open方法准备ajax请求
4) 调用send方法发送ajax请求
document.getElementById('btn').onclick = function () {
var xhr = getXhr();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
alert(xhr.responseText);
}
}
xhr.open('get', './a.txt');
xhr.send(null);
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <script>
var div = document.querySelector('div');
div.onclick = function(){
var xmlhttp = 0
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = ActiveXObject('Msxml2','XMLHTTP');
}
xmlhttp.open('get','ls.php');
xmlhttp.send(null);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4){
console.log(xmlhttp.responseText);
}
}
}
</script>
|
虚拟主机配置
什么是虚拟主机
虚拟主机，也叫“网站空间”，就是把一台运行在互联网上的物理服务器划分成多个“虚拟”服务器，每一个虚拟服务器都能独立运行一个网站
虚拟主机配置3步骤
案例: 配置 www.study.com 虚拟主机
- 修改apache配置文件(httpd.conf)，引入apache的虚拟主机配置文件(httpd-vhost.conf)
去掉该句前的 # 号
- 修改虚拟主机配置文件
d:\phpstudy\Apache\conf\extra\httpd-vhosts.conf
- 修改host文件 (使用管理员权限修改)
c:/windows/system32/drivers/etc/hosts
==重启Apche服务器==‘
注意： www.study.com 指向 d:/phpstudy/WWW/study 目录
ajax跨域
什么是ajax跨域
1
2
3
4
5
6
7
| 简单来说，就是网站A去调用网站B的数据。
常见案例： hao123.com的天气预报。
但是Ajax跨域存在一个问题 --- 浏览器的同源策略，该策略会阻止ajax跨域访问
同源策略（Same origin policy）是一种约定，它是浏览器的一种安全功能。
同源: 同协议，同域名，同端口； 不同源则为跨域
|
解决跨域问题有三种方式：
服务器代理
1
2
3
4
5
6
7
8
9
10
11
| 核心思想: php中有一个函数 ==file_get_contents==。 该函数能够获取到其他网站的数据。
file_get_contents('http://www.baidu.com/index.html');
1)创建 www.study.com/proxy/index.html
在该文件中发送ajax请求，请求同服务器(www.study.com)下的 proxy.php文件
2)创建 www.study.com/proxy/proxy.php
在该文件中使用 file_get_contents函数，读取远程服务器1.php中的内容
3)创建 www.demo.com/1.php
|
cors （跨域资源共享）
1
2
3
4
5
6
7
8
9
10
11
12
| cors: 跨域资源共享。
同源策略是浏览器的策略。但是如果服务器允许其他网站的页面进行跨域访问，那么浏览器就不会对返回的数据进行限制了。
==核心方法: 在服务器端(PHP文件中)声明不用进行同源限制==
如果设置为 * 则是所有外部网站都可以获取数据
header('Access-Control-Allow-origin: *');
只允许www.study.com网站访问并获取数据
header('Access-Control-Allow-origin: http://www.study.com');
1)创建 www.study.com/cors/index.html文件 发送ajax请求
2)创建 www.demo.com/cors.php
|
jsonp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| 核心思想:
浏览器虽然有同源策略，但是 src 和 href 两个属性却可以跨域访问。 可以利用这一“漏洞”发送ajax请求。
案例:
www.study.com/jsonp/index.html文件中通过script标签的src属性，跨域访问www.demo.com/jsonp.php文件中的数据
1) 创建 www.study.com/json/index.html ,使用 script标签引入了 www.demo.com/jsonp.php文件
2) 创建 www.demo.com/jsonp.php文件 输出个 123
3) 调整后台返回数据的方式 --- 返回了一个 ==函数字符串 例如: 'aaa(123)'==
4) 在前端页面提前定义好 函数 aaa()
5) 丰富一下后台返回数据的类型
html文件
<script>
function aa(){
alert();
}
</script>
<script src="http://www.demo.com/1.php"></script>
php文件
|
$.ajax方法跨域操作 — jsonp方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| $.post $.get $.ajax都能发送跨域请求。但是，$.post和$.get是要依靠cors方式的，只有$.ajax能使用jsonp方式
核心:
必须设置请求类型为get --- type: ‘get’
必须设置dataType为jsonp --- dataType: ‘jsonp’
必须额外设置一个jsonp参数，该参数值可以是任何英文字符串，常用callback。 jsonp: 'callback'
==该参数会产生一个随机字符串==
==前端使用该字符串创建一个函数==
==后端接收该字符串作为返回函数的名称==
示例:
1) 使用jsonp发送跨域请求
$.ajax({
url: 'http://www.study.com/test/3.php',
type: 'get',
dataType: 'jsonp',
jsonp: 'callback', //解决前后端函数名统一的问题
success: function(msg){
alert(msg);
alert(msg.name);
}
})
2) 后端拼接函数字符串
<?php
$callback = $_GET['callback'];
$str = "$.ajax--->jsonp";
echo $callback . "('$str')";
?>
|
同源策略
但是Ajax跨域存在一个问题 — 浏览器的同源策略，该策略会阻止ajax跨域访问
同源策略（Same origin policy）是一种约定，它是浏览器的一种安全功能。
同源: 同协议，同域名，同端口； 不同源则为跨域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| FormData对象优势就是能够一次性将表单中的所有数据全部取出，包括文件域的文件对象。
1)创建表单 --- form标签很重要， method和action不重要
每个表单域需要设置name值
2)发送ajax请求
①将表单数据取出 --- FormData
i.获取form表单对象: var fm = document.getElementById(‘mainForm’);
ii.实例化FormData对象: var fd = new FormData(fm);
②发送ajax请求
使用FormData对象以后，必须使用post方式来发送ajax请求。
将FormData对象，作为参数传入 send方法中 xhr.send(fd);
③ 使用FormData对象提交表单时，不需要设置 setRequestHeader方法
注意点:
① form标签要给id值，方便获取form标签的DOM对象
② 每个域都要给 name值
③ 提交按钮必须用 button，因为submit有跳转功能
2) 使用FormData对象获取所有表单的数据，并发送ajax请求
3) 在formdata.php页面，接收数据
|