当前位置：首页 > 资讯 > 技术文档

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

时间：2022-09-27 03:28 编辑：来源：阅读：
扫一扫，手机访问

摘要：谈谈你对aja的理解(一、二)

什么是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对象，直接与服务器进行通讯，可以在不重载页面的情况下与服务器交换数据。 [b]1、创建XMLHttpRequest对象[/b] var xhr = new XMLHttpRequest() 对于IE早期版本（IE7及以下版本）使用，new ActiveXObject(\"Microsoft.XMLHTTP\")、new ActiveXObject(\"Msxml2.XMLHTTP\")等方式创建对象 [b]2、XMLHttpRequest对象常用属性和常用方法[/b] 属性 readystate 返回XMLHTTP请求的当前状态码 state 返回当前请求的HTTP状态码 statusText 返回HTTP状态码对应的文本方法 onreadystatechange 监听readystate和state状态 ajax的理解（二） ajax方法：通过 HTTP 请求加载远程数据 get方法：通过远程 HTTP GET 请求载入信息 post方法：通过远程 HTTP POST 请求载入信息 [b]1、创建XMLHttpRequest对象 [/b]

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

[b]2、将键值对转换成拼接串 [/b]

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

[b]3、封装ajax方法 [/b] 参数 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();

全部评论(0)

上一篇：Ajax请求session失效该如何解决
下一篇：ajax跳转到新的jsp页面的方法

资讯排行榜
更多>>