编写Ajax

目录

 

编写Ajax

1、创建Ajax对象

2、连接到服务器

3、发送请求

4、接收返回

缓存

总代码

---

编写Ajax

首先先下载wampserver
链接：https://pan.baidu.com/s/10oLrgHJFFh5vKgAQXY_WzA 
提取码：lldr 

安装完后打开www文件夹会发现里面有文件，删掉就行，没什么用。
然后再www中建个txt，我命名为liang.txt

 

---

 

1、创建Ajax对象

有两种方法：

1、var oAjax = new XMLHttpRequest();  //只兼容非IE6的浏览器

2、var oAjax = new ActiveXObject("Microsoft.XMLHTTP");  //只兼容IE浏览器

---

 

 

一般照顾兼容，我们会直接用 if 语句

if （XMLHttpRequest） 
{
    var oAjax = new XMLHttpRequest();
}
else 
{
    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}

这样写在IE6中会抛出错误

原因：

先举个栗子说明一下问题：

var a = 12;
alert(a);  
// 输出12


var a = 12;
alert(window.a);
// 输出12


//定义的全局变量，其实就是定义window的属性

/


//当不定义a变量时，直接弹出a
alert（a）;
//此时会抛出错误


//当不定义a
alert(window.a);
//输出undefined


//原因是因为输出没有定义的变量，会因为找不到这个变量而抛出错误。而输出没有定义的属性，只是会认为这个属性没有赋值，所以弹出undefined

所以  if （XMLHttpRequest） 在IE6中会抛出错误，是因为没有定义 XMLHttpRequest ，所以应该改为  if（window.XMLHttpRequest）  

 

---

 

2、连接到服务器

open(方法， 文件名， 同步/异步传输)；

oAjax.open('GET', 'liang.txt', true);

同步（false）/异步(true)？
按照我们平常的理解： 同步就是多件事一起进行，异步就是一件一件事进行
但在JS中刚好相反， 同步是一件一件事进行， 异步是多件事一起进行

一般都是异步

---

 

3、发送请求

send()  : 接收一个参数，作为请求体发送的数据。如果不需要发送请求体，则必须传 null ，因为这个参数在某些浏览器中是必需的

oAjax.send(null);

 

---

 

 

4、接收返回

对于Ajax来说它是跟网络打交道的，所以涉及到一个问题，服务器发回的东西不一定多长时间能回来，有可能是一瞬间，也有可能是一分钟，也有可能需要很长一段时间，视网速而定。

Ajax实际来说是以一个事件的形式存在，当服务器的信息返回回来的时候，这个事件会被调用，很类似于原来的window.onload，但Ajax是用 onreadystatechange 。onreadystatechange 跟服务器有交互的时候，会发生的一个事件

服务端跟客户端之间的通信是分成几个步骤，可以用 readyState 判断服务器跟客户端的交互进行到哪一步了
0 ：未初始化，还没调用open()方法
1 ：载入，已调用send()，正在发送请求
2 ：载入完成，send()完成，已收到全部响应内容
3 ： 解析，正在解析响应内容
4 ：完成，响应内容解析完成，可在客户端调用了

一般关心readyState=4 ，即整个交互已经完成了（读取完成）
读取完成不代表读取成功，也可能失败了，可用 status（状态码） 判断，状态码 200≤ status < 300, 或者 = 304时，响应成功

oAjax.onreadystatechange = function () {
    if (oAjax.readyState === 4) {
        if ( (oAjax.status >= 200 && oAjax.status <= 300) || oAjax.status === 304 ) {
            alert("成功" + oAjax.responseText); // 服务器响应的文本
        }
        else {
            aler("失败" + oAjax.status);
        }
    }    
}

 

---

 

将写好的html文档存在www文件夹中，再用浏览器打开，地址栏要写localhost/xxx.html，访问本地这台机器的服务器 ，也可以用 127.0.0.1/xxx.html

 

缓存

此时又要说到缓存的问题：

当你打开上面的html后会弹出  成功+liang.txt里的内容。 此时你修改liang.txt的内容会发现，即使你刷新页面  ，弹出的内容也不会更新，关闭再打开网页也可能不会更新，这就是缓存导致的。所以要组织缓存

缓存的机制：根据url缓存，也就是对于同一个地址只读取一次

阻止缓存：让url一直在变 （'aaa.txt?t=' + new Date().getTime() 方法之一 ） 在文件名后面加上一个没用的t，后台不会接受这个t，仅仅是给浏览器看的

oAjax.open('GET', 'liang.txt?t=' + new Date().getTime());

 

总代码

<script>
    window.onload = function () {
      var oSub = document.getElementById('sub');

      oSub.onclick = function () {
        if (window.XMLHttpRequest) {
          var oAjax = new XMLHttpRequest();
        }
        else {
          var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        }

        oAjax.open('Get', 'liang.txt', true);

        oAjax.send(null)

        oAjax.onreadystatechange = function () {
          if (oAjax.readyState === 4) {
            if ((oAjax.status >= 200 && oAjax.status <= 300) || oAjax.status === 304) {
              alert('成功' + oAjax.responseText);
            }
            else {
              alert('失败' + oAjax.status);
            }
          }
        };
      };
    };
  </script>