ajax
简介
简单说，ajax是前后端交互的手段。
ajax是组成词，其中，a是英文单词与asynchronous，表示异步,j就是js,a:and,x:服务端的数据，那么我们就容易了解到，ajax其实是一种组合技术。
特点：可以异步加载数据，可以在不中断浏览器其他任务的情况下加载数据，无刷新加载数据，局部加载。
优缺点:
ajax兼容好,没有兼容
无刷新加载数据,提升了用户体验
无刷新加载数据,局部加载,提升了性能
ajax的使用环境:
ajax是前后端交互
有ajax,就得有后台
后台必须依托于服务器
所以，ajax也要在服务器环境下运行
学习ajax的过程中，我们是需要了解到数据的解析，因为我们在编写前后端交互的时候需要进行数据的转换，将添加的数据展示到前端，这是一个基本操作，我这里点连个必要的解析方法：JSON.patrse();和eval().
JSON.parse（）只能转换json格式的，eval():将字符,作为js代码执行,要求字符内的内容，符合js语法。可以运行下下面代码看看区别。
var json = '[{"name":"admin"},]';
console.log(eval(json));
console.log(JSON.parse(json));
下面我会给大家列出ajax几段代码，方便大家学习使用，运行时候需要在服务器上运行，如果你没有，可以装一个phpstudy，网上有免费的，这几段代码一定要按照顺序一个一个的敲出来，代码中附有注释，相信大家都可以看懂。
创建一个ajax文件夹，文件夹里创建data子文件夹，dada文件夹里创建出一个text.txt和test.php文件，里面内容随意。准备工作完成后就可以创建运行下面代码了；
ajax-get.html,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
测试ajax的get请求。
</body>
<script type="text/javascript">
// //var url = "data/text.txt";//相对路径，在本机可以，放在服务器就出现问题了
var url = "http://localhost/Myphp/ajax/data/text.txt";//绝对路径不容易出错，任何情况下都可以访问到。
//1、声明载体xhr对象
var xhr = new XMLHttpRequest();
//2、发起请求，设置请求方式，地址，异步
xhr.open("get",url,true);//默认为true也就是异步
//3、等待接通
//3、通过事件监听状态
xhr.onreadystatechange = function(){
//readyState状态:ajax的执行阶段
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.status+"="+"交易成功");
console.log(xhr.responseText);
}else if(xhr.readyState == 4 && xhr.status !=200){
console.log(xhr.status);
}
}
//4、发送
xhr.send(null);
</script>
</html>
ajax-get2.html代码如下：这是ajax的封装，方便我们使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--正在验证ajax-get的封装，点击页面发起请求-->
</body>
<script type="text/javascript">
document.onclick = function(){
var url = "http://localhost/Myphp/ajax/data/test.php";
ajaxGet(url,function(res){
console.log(res);
},{
user:"admin",
pass:123,
age:13,
sex:1,
like:"ball"
});
}
//第三个数据是可选的，可以有也可以没有
function ajaxGet(url,cb,data){
//1、解析并拼接数据
var str = "";
for(var i in data){
str = str + i + "=" +data[i]+"&";
}
//console.log(str.slice(0,str.length-1));//注意数组，字符串方法的灵活使用。
//2、把拼接好的数据再拼接到url
url = url + "?" + str.slice(0,str.length-1);
//3、开启ajax过程。
var xhr = new XMLHttpRequest();
xhr.open("get",url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
cb(xhr.responseText);//给回调函数传参。（好好想回调传参）
}
}
xhr.send();
}
</script>
</html>
ajax-post.html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
post封装测试。
</body>
<script type="text/javascript">
var url = "http://localhost/Myphp/ajax/data/post.php";
document.onclick = function(){
ajaxPost(url,function(res){
console.log(res);
},{
a:"hello",
b:"world",
abc:"hahaha"
})
}
//
function ajaxPost(url,cb,data){
//1\解析对象拼接数据
data = data || {
};
var str = "";
for(var i in data){
str = str + i + "=" + data[i] + "&";
}
str = str.slice(0,str.length-1);
//2\执行ajax
var xhr = new XMLHttpRequest();
xhr.open("post",url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
cb(xhr.responseText);
}
}
//3、设置发送头文件
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//4、发送
xhr.send(str);
}
</script>
</html>
结语
大家在学习的时候一定要自己亲自敲一遍，别觉得这是在浪费时间，只是赋值黏贴，效果是完全不一样的呦。自己动手丰衣足食。