Ajax

来源：互联网发布：软件社区编辑：程序博客网时间：2024/06/05 17:25

一、什么是Ajax

浏览器与服务器之间采用HTTP协议通信，Ajax技术就是允许JavaScript脚本向服务器发起HTTP请求。Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和XML，也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用，不是一门新语言。与XML的关系就是可以读取和返回XML文件。

二、核心对象

Ajax的核心对象就是XMLHttpRequest，ajax通过XMLHttpRequest对象执行操作，其中XMLHttpRequest对象是在浏览器中内置的一个对象

三、运行原理

其运行原理就相当于创建了一个请求代理，通过代理去完成与服务器的交互，交互的过程中客户不需要等待，还可以进行其它的工作，交互完成以后，代理再将交互的结果返回给客户页面。

四、AJAX包括以下几个步骤：

1.创建AJAX对象

2.发出HTTP请求

3.接收服务器传回的数据

4.更新网页数据

概括起来就是一句话：AJAX通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。

<script type="text/javascript">//1.创建一个ajax的对象if(window.XMLHttpRequest) {  var xhr = new XMLHttpRequest(); //非IE  } else {  var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE6  }//2.链接服务器xhr.open('get','test.html','true');//分别是：访问方式 访问地址 是否异步，一般都异步xhr.open('post','test.html','true');//若用post方法要加下面一句话,并且将加的内容放在send()中；若用get方法,将内容拼接在open访问地址中xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');//3.发出HTTP请求xhr.send();//正式发送请求//4.接收服务器传回的数据xhr.onreadystatechange = function(){//.onreadystatechange当请求的状态发生改变的时候触发if(xhr.readystate == 4){//请求的状态码/*0:请求还没有建立（open执行前）1：请求建立了还没发送（执行了open）2：请求正式发送（执行了send）3：请求已受理，有部分数据可以用，但还没有处理完成4：请求完全处理完成*/alert(xhr.responseText);//返回的数据}}</script>

五、简单实例

<!DOCTYPE html>  <html>      <head>          <meta charset="UTF-8">          <title></title>          <script type="text/javascript">              window.onload = function() {                  var oBtn = document.getElementById('btn');                    oBtn.onclick = function() {                      ajax('aa.txt',function(str) {                          alert(str);                      },function() {                          alert('失败');                      });                  };              };function ajax(url, fnSucceed, fnFaild) {   if(window.XMLHttpRequest) {  var xhr = new XMLHttpRequest(); //非IE  } else {  var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE6  } xhr.open('GET', url, true);    xhr.send();    xhr.onreadystatechange = function() {  if(xhr.readyState == 4) {  //alert(xhr.responseText);  if(xhr.status == 200) {  //alert('成功' + xhr.responseText);  fnSucceed(xhr.responseText);  } else {  if(fnFaild) {  //alert('失败' + xhr.status);  fnFaild();  }  }  }  }  }          </script>      </head>      <body>          <input type="button" id="btn" value="快点我" />      </body>  </html>

阅读全文

1 0