**
AJAX Asynchronous JavaScript and XML‘’数据传输格式‘’ （异步JavaScript和XML数据传输格式）
AJAX的优势
：节省用户操作，时间，提高用户体验，减少数据请求 传输获取数据
这里提到的同步和异步，是和现实生活中截然不同的：
**同步：**阻塞，当前程序运行，必须等前一个程序运行完毕以后，才能运行
**异步：**非阻塞，当前程序运行，和前面程序的运行没有任何关系。（所以我们常用异步处理）
数据传输的两种格式
1.XML （大型门户网站，网易，新浪等）
优点：
1.种类丰富
2.传输量非常大
缺点：
1.解析麻烦
2.不太适合轻量级数据（数据比较多）
2.JSON (95%移动端应用使用的json，常用于移动端)
优点：
1.轻量级数据
2.解析轻松
解析：1.JSON.pare()
2.JSON.stringify()
缺点：（相对概念）
1.数据种类比较少
2.传输数据量比较小
JSON的使用方法如下：
比如我们要去买一个家具，我们选好家具后需要在运输过程中将其拆卸运输，运送到家后再进行组装
所以JSON中提供JSON.stringify（） JSON.parse() 将原函数中的数据转化为字符串进行传输 传输到了后再转换为数据的结构
宜家（买） 运输 我家
装好的 拆掉 装好
前端 运输 后端
数据结构（数组，对象） 字符串 数据结构
XML/JSON XML/JSON
JSON.stringify（） JSON.parse()
JSON.stringify（） 数据结构 转换为 字符串
JSON.parse() 字符串 =》数据结构
注意在服务器PHP端中也有两个转换方法
json_encode() 将数据结构转换成字符串
json_decode() 将字符串转换成对应的数据结构
ajax下载数据语法步骤（get方法）
1.创建ajax对象
var xhr =new XMLHttpRequest();
XMLHttpRequest IE8一下不兼容
IE8以下声明ajax的方法是
ActiveXObject("Microsoft.XMLHTTP");
所以我们需要写成兼容模式
var xhr =null; //兼容模式
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2.调用open（默认get方法）
xhr.open("get","1.txt",true);
第一个参数：请求方式 get post
第二个参数： url
第三个参数： 是否异步
true： 异步
false 同步
3.调用send 发送
xhr.send();
4.等待数据响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
这里需要注意一个函数：
responseText ： 返回以文本形式存放
responseXML : 返回XML形式的内容
xhr.readyState 发生错误的时候调用（请求状态）
0 (初始化)调用open方法之前
1 （载入）已调动send（）方法，正在发送请求
2 （载入完成）send方法完成，已收到全部响应
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了
HTTP 状态码 ajax.status
AJAX 状态码说明：ajax.status == 200 表明HTTP状态正常
404代表错误等等，这里大家可以自己查一下。
对AJAX有了基本的认识，那么如何利用AJAX实现数据的收集，下载呢
form向服务器上传数据
1.GET方法
get方法：是直接将数据拼接在url后面进行提交。通过？进行拼接，查询字符串
HTML标签如下：
action ： 点击sumbit以后跳转到的url
metgod : 表单的提交数据的方式
<form action="1.get.php" method="get">
<input type="text" name='username' placeholder="用户名">
<input type="text" name="age" placeholder="年龄">
<input type="password" name="password" placeholder="请输入你的密码">
<input type="submit">
</form>
PHP服务器设置如下：
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
//系统或者应用程序出错时弹出的，错误报告，编程人员根据这个报告的内容可以判断是那一段代码出错
/*
$_GET (全局的关联数组) 存放通过get提交 提交的所有数据
*/
$username= $_GET['username'];
$age = $_GET['age'];
$password = $_GET['password'];
echo "你的名字：{$username},你的年龄是{$age},密码：{$password}";
?>
执行结束后 网页为：
http://localhost/php/1.get.php?username=raoyangjun&age=22&password=123456
get方法
优点：
简单，直接在url中修改就可以重新提交
缺点：
1.不安全
2.地址栏中的数据最大2kb
3.没法实现上传
POST方法：
post的提交方法：post提交通过浏览器内部进行提交
action ： 点击sumbit以后跳转到的url
metgod : 表单的提交数据的方式
HTML:注意：使用post方法form标签属性应添加enctype=“application/x-www-form-urlencoded”
<form action="1.post.php" method="POST" enctype="application/x-www-form-urlencoded">
<input type="text" name='username' placeholder="用户名">
<input type="text" name="age" placeholder="年龄">
<input type="password" name="password" placeholder="请输入你的密码">
<input type="submit">
</form>
PHP：
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
//系统互殴应用程序出错时弹出的，错误报告，编程人员根据这个报告的内容可以判断是那一段代码出错
/*
$_POST (全局的关联数组) 存放通过POST提交 提交的所有数据
*/
$username= $_POST['username'];
$age = $_POST['age'];
$password = $_POST['password'];
echo "你的名字：{$username},你的年龄是{$age},密码：{$password}";
?>
执行结束后的url：http://localhost/php/1.post.php
好处：
1.安全
2.理论上没有上限
3.上传
缺点：比get复杂（底层）;
2.从服务器下载数据
AJAX_GET 方法：
服务器数据：
$username= $_GET['username'];
$age = $_GET['age'];
$password = $_GET['password'];
echo "你的名字：{$username},你的年龄是{$age},密码：{$password}";
HTML页面请求下载
oBtn.onclick = function(){
var xhr =null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get","1.get.php?username=yyy&age=19&password=123abc",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//判断本次下载的状态码是多少
if(xhr.status==200){
alert("下载成功");
alert(xhr.responseText);
}else{
alert("Error"+xhr.status);
}
}
}
AJAX_POST 方法
服务器数据：
$username= $_POST['username'];
$age = $_POST['age'];
$password = $_POST['password'];
echo "你的名字：{$username},你的年龄是{$age},密码：{$password}";
HTML页面请求下载
oBtn.onclick = function(){
var xhr =null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post","1.post.php",true);
//设置send请求格式
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
/*
post提交的数据，需要通过send方法进行提交
？name1=value&name2=value2 search
name1=value&name2=value2 querystring
*/
xhr.send("username=yyy&age=19&password=123abc");
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//判断本次下载的状态码是多少
if(xhr.status==200){
alert("下载成功");
alert(xhr.responseText);
}else{
alert("Error"+xhr.status);
}
}
}
注意GET 与 POST 方法下载数据的不同语法之处
GET方法中：
open的方法
xhr.open("get","1.get.php?username=yyy&age=19&password=123abc",true);
send的方法
xhr.send();
POST 方法中
open的方法
xhr.open("post","1.post.php",true);
send方法，需要先设置send请求格式，写在send方法前
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
send方法
xhr.send("username=yyy&age=19&password=123abc");
ajax框架函数
学习到这里我们对AJAX的整体都有一定的了解了，其实在实际开发中我们常常将AJAX的方法进行函数封装，使用时只需调用该函数即可：
框架如下：（大家还是要自己分析哦）
框架中的函数：
method get/post
url 1.get.php / 1.post.php
data 数据
success 数据下载成功以后执行的函数
error 数据下载失败后执行的函数
function $ajax({method = "get", url ,data,success,error}){
var xhr =null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(data){
data = querystring(data);
}
if(method == 'get' && data){
url +="?"+data;
}
xhr.open(method,url,true);
if(method == 'get'){
xhr.send();
}else{
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(success){
/*
如何去处理数据操作不确定
使用回调函数:
*/
success(xhr.responseText);
}else{
if(error){
error('Error'+xhr.status);
}
}
}
}
}
function querystring(obj){
var str = '';
for(var attr in obj){
str += attr +"="+obj[attr]+"&";
}
return str.substring(0,str.length-1);
}
总结：
前后端交互的流程：
1.通过ajax下载数据
2.分析数据，转成对应的数据结构
3.处理数据
扫一扫
516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
