简单介绍不用库(框架)自己写ajax

平常会使用ajax来请求数据,加载一个库(框架),或许仅仅maybe就使用了它的ajax部分。

  写个ajax,一来可以经历一下处理问题的过程,提升技术能力,二来工作中有时真的用不着这么大的一个库(框架),用自己写的,何乐不为呢。

  先来看看流行的jQuery是怎样调用ajax的

$.ajax({ url: 'test.php', //发送请求的URL字符串 type: 'GET', //发送方式 dataType: 'json', //预期服务器返回的数据类型 xml, html, text, json, jsonp, script data: 'k=v&k=v', //发送的数据 async: true, //异步请求 cache: false, //缓存 timeout: 5000, //超时时间 毫秒 beforeSend: function(){}, //请求之前 error: function(){}, //请求出错时 success: function(){}, //请求成功时 complete: function(){} //请求完成之后(不论成功或失败) });

  这样的调用是不是很舒适、方便,如果感觉舒适那自己动手写也参照这种设计方式,不用太复杂,满足所需就好。

  先了解ajax的基础知识

  XMLHttpRequest 对象

  XMLHttpRequest对象是ajax的核心,通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据,所有现代浏览器(IE7+、Firefox、Chrome、Safari、Opera)均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。  

  创建一个兼容的XMLHttpRequest对象

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

  向服务器发送请求

xhr.open(method,url,async);
    //method:请求的类型;GET 或 POST
    //url:请求的URL
    //async:true(异步)或 false(同步)
xhr.send(string);
    //将请求发送到服务器
    //string:仅用于 POST 请求
//GET 比 POST 请求方式更简单也更快,并且在大部分情况下都能用
//在以下情况中,请使用 POST 请求:
    //无法使用缓存文件(更新服务器上的文件或数据库)
    //向服务器发送大量数据(POST 没有数据量限制)
    //发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

  服务器响应

  使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性获得来自服务器的响应。

    如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性。

    如果来自服务器的响应并非 XML,请使用 responseText 属性,responseText 属性返回字符串形式的响应。

  onreadystatechange 事件

  当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

   XMLHttpRequest 对象的三个重要的属性:

    onreadystatechange  //存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数

    readyState  //存有 XMLHttpRequest 的状态, 从 0 到 4 发生变化     

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪

    status  //200: "OK", 404: 未找到页面

  在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务, 当 readyState等于4 且 status为200 时,表示响应已就绪。

xhr.onreadystatechange = function(){ if( xhr.readyState == 4 && xhr.status == 200 ){ //准备就绪 可以处理返回的 xhr.responseText 或者 xhr.responseXML } };

  一个简单的ajax请求如下:

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.onreadystatechange = function(){ if( xhr.readyState == 4 && xhr.status == 200 ){ //准备就绪 可以处理返回的 xhr.responseText 或者 xhr.responseXML } }; xhr.open(method,url,async); xhr.send(string);

  补充:1. 发送GET请求时可能得到的是缓存的结果,为了避免这种情况,可以向URL 添加一个唯一的 ID,时间戳。2. 如果需要像HTML表单那样 POST 数据,使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中发送数据。

url += (url.indexOf('?') < 0 ? '?' : '&') + '_='+ (+new Date()); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  开始写自己的ajax

  先写一个基本的,定义好各种参数选项,供参考

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wfyjfw.html