关闭

Ajax初学习

标签: ajax基础ajax请求发起ajax数据接收与处理javascriptajax核心对象的创建
259人阅读 评论(0) 收藏 举报
分类:

Ajax,英文AsynchronousJavascriptAnd XML”(异步JavascriptXML)是一种用于创建快速动态网页的技术。

Asynchronous :浏览器支持异步通信模式,实现局部页面刷新

JavaScript:使用的编程语言

and

XML:通信数据的承载方式,但是实际上很少使用mxl格式

        通过在后台服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

举个例子:

        传统方式下,我们提交表单,当输入完成后点击确定并提交,然后页面重新加载并刷新,用户得要等待一会,在这期间不能对页面进行其他操作。即页面被锁住,好了,页面刷新好了,结果用户却被提示“输入有误”,这是不是很坑,这种情况给用户所带来的体验是非常差劲的,那么我们的Ajax就可以解决这一问题。它可以做到,不弹出结果页,在该页面局部给出提示信息,“输入的xx有无”,用户无需等待页面重新加载,因为只进行了局部页面刷新,整个页面也并没有被锁死,我们可以进行其他操作。

详解:

在输入框中输入信息,马上向服务器发送请求,获取一个与输入匹配的列表提示,我们需要向输入框绑定一个监听事件,利用ID获取到文本对象

1.创建XMLHttpRequestx对象(ajax的核心对象)

对于大多数浏览器都内置了XMLHttpRequest,可以直接new就可以得到该对象的实例。

此处呢,需要考虑浏览器的兼容问题

function createXHR(){
   //不支持低版本浏览器的创建对象的方法,IE7+
   return new XMLHttpRequest();
  }

再来一发兼容性考虑周全的:

//兼容浏览器的方式创建对象,所有支持ajax的浏览器
  function createXHR2(){
   var xhr=null;
   if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
   }else if(window.ActiveXObject){
    try{
     xhr=new ActiveObject('Msxml2.XMLHTTP');
    }catch(e){
     try{
      xhr=new ActiveXObject('Microsoft.XMLHTTP');
     }catch(e){}
    }
   }
   return xhr;
  }

level2完全兼容level1;

进行创建时,从高版本到底版本进行考虑,IE6+,IE6,IE6以下

2.ajax请求的发起

//创建http请求对象
   var xhr=createXHR2();

open方法初始化操作,send方法真正向服务器发送信息,只有执行open方法后才能进行send操作。

xhr.open('GET','http://test/...',true);

//true代表是异步请求,false是同步请求(降低用户体验),get是数据传送方式只能将你要提交的数据放在URL里,URL是目标地址

还有两个参数没有写,这个是当进行密码验证时会用到。

异步是ajax的亮点,用户体验很好,但是复杂度会提高。在某些不影响用户体验的情况下,可以使用同步请求(不建议使用,所有的异步方式问题现在都有相关技术可以解决)

接下来设置请求头

xhr.setRequestHeader("content-type","application/json");

//给当前的请求设置请求头,告诉服务器当前发送的数据是以json的格式来组织
//添加自定义请求头:
//xhr.setRequestHeader("text","value");

发送数据:

浏览器如果没有内置json对象该怎么办?引入json2库。

浏览器不能识别json对象,所以我们要将json对象序列化

xhr.send(JSON({
    keyword:'c',
    other:'test'
   }))
;

3.相应的接收与处理

当浏览器返回结果时是需要给程序发送通知的,然后才会继续处理,这种通知机制就是事件。

怎样获知数据是否发送完成

readyState 5种状态:获知数据是否发送完成
     //0 没有初始化没有send时
     //1 链接建立、请求发出
     //2 览器与服务器建立连接,服务器返回响应,
     //3 交互(处理数据)
     //4 完成

用if语句进行判断。

得到返回的数据后,我们需要处理一下,如果返回的是json字符串,我们需要将其转换成json对象

//如果想要的是文本,那就不用处理

//将字符串转换为json对象
     JSON.parse(xhr.responseText);

//如果浏览器没有内置json对象,
     eval(xhr.responseText);

最后再讲一下level2的新增处理:timeout:设置超时提醒,单位是ms

xhr.timeout=5000;






1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3449次
    • 积分:140
    • 等级:
    • 排名:千里之外
    • 原创:11篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档