【3分钟带你学】Ajax

Asynchronous JavaScript And XML

什么是Ajax?

• Asynchronous ：异步

• JavaScript ：JS语言

• And ：和

• XML ：万能的数据传输格式

Ajax ：异步的JavaScript与XML，这就是Ajax介绍。

本质是客户端通过HTTP请求向服务器发送请求

无刷新，让JS发送HTTP请求

一、Ajax对象

1.1 获取对象

基于W3C标准的浏览器

var xhr = new XMLHttpRequest();

IE浏览器方式(IE8开始向W3C标准靠拢)

var xhr = new ActiveXObject('Microsoft.XMLHTTP');

将兼容代码封装进函数调用

<script>
//封装进函数供其他程序调用
function cXHR(){try{return new XMLHttpRequest()}catch(e){};try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){};
}
</script>

1.2属性

readyState 获取Ajax状态码

0：表示对象已建立，但未初始化，只是 new 成功获取了对象，但是未调用open方法
1：表示对象已初始化，但未发送，调用了open方法，但是未调用send方法
2：已调用send方法进行请求
3：正在接收数据（接收到一部分），客户端已经接收到了一部分返回的数据
4：接收完成，客户端已经接收到了所有数据

status http响应状态码

HTTP状态码:

1: 消息

2: 成功

3: 重定向

4: 请求错误(文件不存在,没有权限)

5: 服务器内部错误

responseText： 如果服务器端返回字符串，使用responseText进行接收

responseXML：如果服务器端返回XML数据，使用responseXML进行接收

onreadystatechange：当 readyState 状态码发生改变时所触发的回调函数

1.3方法

open(method,url,async) 初始化Ajax对象

method请求方式： get/post

url请求的服务器地址

async true代表异步请求，false 代表同步请求,默认异步

setRequestHeader(header,value) 设置请求头信息

header请求头名称

value 请求头的值

send(content) 发送Ajax请求

content 如果get请求，此参数为null；如果post请求。此参数就是要传递的数据

1.4同步与异步

同步：只能做一件事情

异步：同时可以做多件事情

二、发送GET请求

1、记口诀（五步走）

第一步：创建Ajax对象 var xhr = createXhr();

第二步：设置回调函数 xhr.onreadystatechange = function() {}

第三步：初始化Ajax对象 xhr.open(‘get’,url);

第四步：发送Ajax请求 xhr.send(null);

第五步：判断与执行回调函数内部判断if(xhr.readyState == 4) {}

返回结果：字符串，使用xhr.responseText

XML数据，使用xhr.responseXML

下面是注册页面检测是否重名的实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="text" id="inp"><span id='tip'></span><br><input type="button" value="注册">
</body><script>//封装进函数供其他程序调用function cXHR(){try{return new XMLHttpRequest()}catch(e){};try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){};}
</script>
<script type="text/javascript">var inp = document.getElementById('inp');var name = inp.value;inp.onblur = function(){var name = this.value;// 1创建Ajax对象var xhr = cXHR();//2.设置回调函数xhr.onreadystatechange = function(){//5.判断与执行if(xhr.readyState == 4){if(xhr.responseText == 1){var t = "<font color='red'>用户名已经被注册</font>";}else{var t = "<font color='green'>恭喜用户名可用</font>";}document.getElementById('tip').innerHTML = t;}}//3初始化Ajaxxhr.open('get','1.1.php?name='+name);//4发送Ajax请求xhr.send();}
</script>
</html>

PHP后台代码：

<?php
header('content-type:text/html;charset=utf-8');
$name = $_GET['name'];
mysql_connect('localhost','root','root');
mysql_query('use itcast');
mysql_query('set names utf8');$sql = "SELECT id FROM student WHERE name='$name'";
$r = mysql_query($sql);
$res = mysql_fetch_assoc($r);if($res){echo 1;
}else{echo 0;
}

三、IE缓存问题

当使用IE浏览器时，相同一个URL发送多次请求时，浏览器会将页面内容缓存起来，会产生缓存问题；

缓存设计的初衷是以前网速较慢为了加快网站的响应速度。

解决方案：

URL重写
使用随机数产生不同的URL地址
xhr.open('get','user.php?username='+username+'&_='+Math.random());

使用时间戳解决缓存问题

xhr.open('get','user.php?username='+username+'&_='+new Date().getTime());
设置响应头禁用客户端缓存
```
header('Cache-Control:no-cache');
```
设置请求头的缓存时间
```
xhr.setRequestHeader('If-Modified_Since','0');
```
四、Ajax发送POST请求

Ajax中get和post的区别

1.传参方式不同：GET在地址尾部使用？拼接多个参数
POST使用**send()**方法传递参数, 在请求空白行的位置传递参数的2.请求头
POST必须设置请求头xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');GET不用设置3. 参数类型GET只能传输简单类型：数字、字符串POST除了数字和字符串外，还可以传输二进制数据

POST请求

1、记口诀（六步走）

第一步：创建Ajax对象 var xhr = createXhr();

第二步：设置回调函数 xhr.onreadystatechange = function() {}

第三步：初始化Ajax对象 xhr.open(‘post’,url);

第四步:xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

第五步：发送Ajax请求 xhr.send(data);

第六步：判断与执行回调函数内部判断if(xhr.readyState == 4) {}

将上面案例代码,改变一下就可以了

//请求地址 var url = '03-1.php'; //open参数为post xhr.open('post',url); //设置请求头 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //设置post请求参数值 xhr.send('names='+inp.value);

Ajax 实现无刷新上传文件

文件上传原理 ，浏览器客户端将文件载入并解析为二进制数据，
然后通过HTTP协议将数据发送到服务器端，文件上传就已经成功了；
但是对于服务器来说，接收到的文件会放到系统缓存中，
我们需要使用PHP的move_uploaded_file函数将文件移至我们设置好的目录下，并对缓存文件重新命名；
完成移动操作后，我们就可以在服务器端看见上传后的文件了；
想要使用Ajax完成文件上传，首先我们要学会， Ajax作为客户端如何将文件读入并解析为二进制数据；
HTML5为我们提供了 FormData 对象：
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。
如果你把表单的编码类型设置为multipart/form-data，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同;

FormData 手册
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

<script>// 原生上传var form_element = document.querySelector('form');document.querySelector('#btn').onclick = function(){// 获取所有表单数据var data = new FormData(form_element);// ajax上传var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){if(xhr.responseText == 1){alert('上传成功');}else{alert('上传失败');}}}xhr.open('post','upload.php');xhr.send(data);}
</script>