Ajax
Ajax:
XMLHttpRequest 对象
var request = new XMLHttpRequest
Ajax流程：
function ajax(url, fnSucc, fnFaild){
//1.创建Ajax对象
var oAjax = null;
if(window.XHMHttpRequest) {
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
//2.连接服务器
oAjax.open('GET', url, true);
//3.发送请求
oAjax.send();
//4.接收服务器的返回
oAjax.onreadystatechange = function() {
if(oAjax.readyState == 4) { //完成
if(oAjax.status == 200){ //成功
fnSucc(oAjax.responseText);
}else{
if(fnFaild)
fnFaild(oAjax.status);
}
}
}
}
这里是一个ajax简单的应用（请求静态文件）：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="ajax.js">script>
head>
<body>
<button>读取button>
<script>
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function() {
ajax('abc.txt',function(str) {
alert(str);
})
}
script>
body>
html>
请求到同文件夹下的 abc.txt 文件，但是这里有个问题，就是无论现在咋改abc.txt里面的内容
它弹出来的还是最初的内容。（这就是缓存问题）。
优化：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="ajax.js">script>
head>
<body>
<button>读取button>
<script>
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function() {
ajax('abc.txt?t='new Date().getTime(),function(str) {
alert(str);
})
}
script>
body>
html>
加个时间戳 'abc.txt?t='new Date().getTime() 这样的话它每次请求的 t 都是不一样的，同时也就解决了缓存问题。也不是说以后要把所有的缓存都给干掉，因为缓存还是优点大于缺点的，可以减少服务器的压力。
动态文件
eval();
我们来看看它的作用：
var str = '5+10';
alert(eval(str));
我们来看看结果：(它直接弹出来的就是计算的结果，而不是字符串)
- 当我们新创建一个txt文件，内容为: [1,2,3,4]，用ajax传输的时候就默认它为一串字符串，而此时输出数组第0位的时候是一个 [ （单边中括号）,所以在用的时候要加上 eval();
更高级的用法：
var str = "function show() {alert('abc');}";
eval(str); //eval之后show函数就可以用了。
show();
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="ajax.js">script>
head>
<body>
<button>读取button>
<script>
var oBtn = document.getElementsByTagName('button')[0];
// oBtn.onclick = function() {
// ajax('abc.txt?t=' + new Date().getTime(),function(str) {
// alert(str);
// })
// }
oBtn.onclick = function() {
ajax('date.txt', function(str) {
//str=>'[1,2,3,4]'
//此时给它加一个eval
var arr = eval(str);
alert(arr[0]);
})
}
script>
body>
html>
加 eval 后时弹出来的是 1 。此时就是数组中真正的第0位了。
简单的ajax分页效果:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="ajax.js">script>
head>
<body>
<ul id="ul1">ul>
<a href="#">1a>
<a href="#">2a>
<a href="#">3a>
<script>
var oUl = document.getElementById('ul1');
var oBtn = document.getElementsByTagName('a');
for(var i = 0; i < oBtn.length; i ++) {
oBtn[i].index = i;
oBtn[i].onclick = function() {
ajax('page'+(this.index+1)+'.txt', function(str){
var oDate = eval(str);
oUl.innerHTML = '';
for(var i = 0; i < oDate.length; i ++) {
var oLi = document.createElement('li');
oLi.innerHTML = '' + oDate[i].user + ''+'' + oDate[i].pass + '';
oUl.appendChild(oLi);
}
})
}
}
script>
body>
html>
Ajax原理
get : 把数据放在URL里面来提交
post : 把数据放在不是 URL的地方
GET 安全性低、容量低 便于分享 会缓存
POST 安全性一般、容量几乎无限（32位是2G，64位几乎无限）
- GET 用于获取数据（如：浏览帖子）
- POST 用于上传数据（如：用户注册）
编写Ajax
==用一个不存在的变量：出错
用一个不存在的属性：undefined ==
Ajax请求：
- 创建ajax对象
- 连接服务器
- 发送请求
- 接收返回
open(方法, url, 是否异步);
请求状态监控
-
onreadystatechange事件
readyState属性：请求状态0 (未初始化) 还没有调用open()方法
1 (载入)一调用send()方法,正在发送请求
2 (载入完成) send()方法完成, 已收到全部响应内容
3 (解析) 正在解析响应内容
4 (完成)相应内容解析完成，可以在客户端调用了
status属性 为200的时候成功。 -
http请求
是计算机通过网络进行通信的规则。
http是一种无状态的协议
一个完整的http请求过程，通常有下面7个步骤- 建立TCP连接
- Web浏览器向web服务器发送请求命令
- web浏览器发送请求头信息
- web服务器应答
- web服务器发送应答头信息
- web服务器向浏览器发送数据
- web服务器关闭TCP连接
GET：
一般用于信息获取
使用url传递参数
对所发送信息的数量也有显示，一般在2000个字符
POST：
一般用于修改服务器上的资源。
对所发送信息的数量无限制