Ajax初学习

原创 2015年11月19日 10:46:06

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;






版权声明:本文为博主原创文章,未经博主允许不得转载。

ajax用于初学者的学习

  • 2010年05月27日 20:36
  • 1.19MB
  • 下载

Ajax&Json学习笔记

  • 2017年08月01日 23:24
  • 30KB
  • 下载

avalon学习笔记(1) avalon+oniui+ajax实现smartgrid的无刷新分页

avalon学习笔记(1)——avalon+oniui+ajax实现smartgrid的无刷新分页  初次接触avalon,很多地方理解起来还是有点慢。还是动手写个demo跑一跑学得更快。...
  • hlinkkk
  • hlinkkk
  • 2016年05月27日 15:11
  • 1358

xml与ajax学习

  • 2015年06月17日 23:34
  • 32KB
  • 下载

ajax学习课件

  • 2017年06月05日 14:22
  • 1.65MB
  • 下载

SpringMVC学习笔记:Ajax与Controller的参数交互

在SpringMVC的开发中,前端和后端的开发是必须掌握的知识点,无论是form提交还是Ajax提交,梳理好相关知识,在开发过程中将游刃有余。本博文旨在整理归纳,以备查用。...

Ajax学习总结

  • 2015年10月13日 16:16
  • 35B
  • 下载

利用 jQuery UI 和 Ajax 创建可定制的 Web 界面(Portlet) (学习备份)

如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化。个性化的主页或仪表板页面(例如 iGoogle、MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚...

Ajax的学习

  • 2014年10月27日 15:54
  • 692KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax初学习
举报原因:
原因补充:

(最多只允许输入30个字)