谈谈你对ajax的理解(一、二)

技术  /  管理员 发布于 7年前   182

什么是Ajax

Ajax是Asynchronous JavaScript and XML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。传统的HTTP请求流程大概是这样的，浏览器向服务器发送请求-〉服务器根据浏览器传来数据生成response-〉服务器把response返回给浏览器-〉浏览器刷新整个页面显示最新数据，这个过程是同步的，顺序执行。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据，这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了。

ajax的理解(一)

Ajax是Asynchronous Javascript And XML的缩写。 作用：通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象，直接与服务器进行通讯，可以在不重载页面的情况下与服务器交换数据。 1、创建XML

Ajax是Asynchronous Javascript And XML的缩写。

作用：通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象，直接与服务器进行通讯，可以在不重载页面的情况下与服务器交换数据。

1、创建XMLHttpRequest对象

    var xhr =  new XMLHttpRequest()

对于IE早期版本（IE7及以下版本）使用，new ActiveXObject(\"Microsoft.XMLHTTP\")、new ActiveXObject(\"Msxml2.XMLHTTP\")等方式创建对象

2、XMLHttpRequest对象常用属性和常用方法

    属性

    readystate       返回XMLHTTP请求的当前状态码
    state               返回当前请求的HTTP状态码
    statusText       返回HTTP状态码对应的文本

    方法

    onreadystatechange    监听readystate和state状态

ajax的理解（二）

ajax方法：通过 HTTP 请求加载远程数据
get方法： 通过远程 HTTP GET 请求载入信息
post方法：通过远程 HTTP POST 请求载入信息

1、创建XMLHttpRequest对象

function createXHR() {   return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");}

2、将键值对转换成拼接串

  function params(data) {   var a = [];   for (var i in data) {    a.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));   }   return a.join("&");  }

3、封装ajax方法

    参数

method       请求方法      get和post          默认get
  data            键值对         {key:value}
  url               链接地址
  cache           缓存           true   和  false    默认true带缓存
  success       成功             error           异常

function ajax(args) {   var xhr = createXHR();   var data = http://www.cnblogs.com/kuikui/archive/2012/01/12/params(args.data);   if (/get/i.test(args.method)) { // 当为get方式时 将data直接拼接到url后    args.url += "?" + data;   }   if (!args.cache) {  //无缓存    if (args.url.indexOf("?") < 0) { //当无参数data     args.url += "?";    }    args.url += "&" + (new Date()); // Math.random();   }   xhr.open(args.method, args.url, true);   xhr.onreadystatechange = function () {    if (4 == xhr.readyState && 200 == xhr.status) {     args.success(xhr.responseText, xhr.responseXML);    }    else {     args.error();    }   }   if (/post/i.test(args.method)) {    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    xhr.send(data);   }   else {    xhr.send();