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学习课件

  • 2017-06-05 14:22
  • 1.65MB
  • 下载

Ajax学习心得

自己以前一直对Ajax的认识不是很清楚,感觉这一块内容还是比较难以理解的,但是当自己在学习了一段时间java web中心看Ajax,自己对这一块的技术有了新的认识。简单来说就是http中的一个requ...

Ajax学习总结

jQuery学习大总结(五)jQuery Ajax

本篇将jQuery Ajax的使用进行一个完整的总结,由于涉及到的内容相似,但方法重多,所以本篇内容会显得比较多。Ajax是提高网站应用程序的一个很好的方法,当然这使得我们可能要书写更多的代码和花费更...

Ajax&Json学习笔记

  • 2017-08-01 23:24
  • 30KB
  • 下载

xml与ajax学习

  • 2015-06-17 23:34
  • 32KB
  • 下载

Struts2的Ajax的学习

今天学习了Struts2的Ajax,当然看的也是别人的教程,看后感觉Struts的Ajax的封装后的标签使用十分好用,我简单的理一下学习的顺序: 一、首先Struts2的Ajax引用了Dojo和DW...

Ajax的学习

  • 2014-10-27 15:54
  • 692KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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