文档章节

AJAX

潇洒奶牛
 潇洒奶牛
发布于 2014/09/12 21:34
字数 997
阅读 2
收藏 0

最近需要使用ajax,json传数据,快速学习了下ajax,把基本的东西拿出来分享一下,打算以问题的形式来进行文章的编写~go!

(一)什么是Ajax?

           Ajax是一种无需加载整个网页,快速刷新局部网页的技术。Ajax不是新的编程语言,而是一些老技术的融合。


(二)Ajax用到了什么技术?

           异步数据获取技术:使用XMLHttpRequest

           基于标准的表示技术(即静态页):使用XHTML和CSS

           动态显示和交互技术:使用Document Object Model(DOM)

           数据互换和操作技术:使用XML与XSLT,现在流行的还有JSON

           javascript:作为胶水语言将上述技术融合在一起

基本上也可以说,Ajax全是用javascript编写的~~


(三)什么是XMLHttpRequest?

           XMLHttpRequest对象是Ajax的核心,现在的浏览器都支持这个对象,XMLHttpRequest对象用于在后台与服务器交换数据


(四)如何XMLHttpRequest对象?

           对应于不同的浏览器,有不同的创建方法。

           现在的浏览器,都可通过

[javascript] view plain copy print ? 在CODE上查看代码片 派生到我的代码片

  1. <span style="font-size: 18px;">      var xmlhttp = new XMLHttpRequest();</span> 


 var xmlhttp = new XMLHttpRequest();


           来创建XMLHttpRequest对象~!

           而对于IE5,IE6等老版本浏览器,则使用

[javascript] view plain copy print ? 在CODE上查看代码片 派生到我的代码片

  1. <span style="font-size: 18px;"><span style="font-family: Arial; background-color: rgb(255, 255, 255);">             </span>var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");</span> 


 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");


           来创建~

下面这串代码是一个通用的解决办法,可以满足根据不同浏览器调用不同的XMLHttpRequest对象

[javascript] view plain copy print ? 在CODE上查看代码片 派生到我的代码片

  1. <span style="font-size: 18px;"> var xmlhttp; 

  2.     if (window.XMLHttpRequest) 

  3.      {// code for IE7+, Firefox, Chrome, Opera, Safari 

  4.      xmlhttp=new XMLHttpRequest(); 

  5.     } 

  6.     else 

  7.     {// code for IE6, IE5 

  8.      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 

  9.      } 

  10. </span> 


 var xmlhttp;
	if (window.XMLHttpRequest)
 	 {// code for IE7+, Firefox, Chrome, Opera, Safari
 	 xmlhttp=new XMLHttpRequest();
  	}
	else
  	{// code for IE6, IE5
 	 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 	 }



(五)如何向服务器发送请求?

         通过XMLHttpRequest对象的open()方法和send()方法,即可向服务器发送请求

         open(method,url,async)方法,

                 method:请求的类型;GET 或 POST

                 url:文件在服务器上的位置

                 async:true(异步)或 false(同步)   

         send(string)方法

                 string:仅用于 POST 请求


         先看看get请求~

[javascript] view plain copy print ? 在CODE上查看代码片 派生到我的代码片

  1. <span style="font-size: 18px;"> xmlhttp.open("GET","demo_get.asp",true);  

  2.     xmlhttp.send();</span> 


 xmlhttp.open("GET","demo_get.asp",true); 
	xmlhttp.send();


         再看看POST请求~

[javascript] view plain copy print ? 在CODE上查看代码片 派生到我的代码片

  1. <span style="font-size: 18px;"> xmlhttp.open("POST","demo_post.asp",true); 

  2.     xmlhttp.send();</span> 


 xmlhttp.open("POST","demo_post.asp",true);
	xmlhttp.send();


         其实两者差不多对吧?POST是可以传递数据的,怎么传?

[javascript] view plain copy print ? 在CODE上查看代码片 派生到我的代码片

  1. <span style="font-size: 18px;"> xmlhttp.open("POST","ajax.jsp",true); 

  2.     xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 

  3.     xmlhttp.send("fname=steven&lname=Jobs"); 

  4. </span> 


 xmlhttp.open("POST","ajax.jsp",true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send("fname=steven&lname=Jobs");


          异步传输async参数请填写true~


(六)POST和GET有什么不同?

          与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

          然而,在以下情况中,请使用 POST 请求:

                     无法使用缓存文件(更新服务器上的文件或数据库)

                     向服务器发送大量数据(POST 没有数据量限制)

                     发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
       

           GET其实并不常用,因为GET属于明文传输,不安全~


(七)怎么接受服务器的响应?

           只需要使用到XMLHttpRequest的两个属性,分别是responseText和responseXML

           看名字就知道,他们分别对应的是 普通文本 和 XML文件~

           代码如下,只需替换最后的responseText为responseXML即可接受并解析XML文件~

[javascript] view plain copy print ? 在CODE上查看代码片 派生到我的代码片

  1. <span style="font-size: 18px;"> document.getElementById("myDiv").innerHTML=xmlhttp.responseText;</span> 


 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;



(八)关于回调函数onreadystatechange是怎么回事“

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

           readyState的5种状态:

                0: 请求未初始化

                1: 服务器连接已建立

                2: 请求已接收

                3: 请求处理中

                4: 请求已完成,且响应已就绪

[javascript] view plain copy print ? 在CODE上查看代码片 派生到我的代码片

  1. xmlhttp.onreadystatechange=function() 

  2.      { 

  3.      if (xmlhttp.readyState==4 && xmlhttp.status==200) 

  4.      { 

  5.      document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 

  6.      } 

  7.     } 


xmlhttp.onreadystatechange=function()
 	 {
 	 if (xmlhttp.readyState==4 && xmlhttp.status==200)
   	 {
   	 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   	 }
 	}


© 著作权归作者所有

潇洒奶牛
粉丝 6
博文 8
码字总数 6269
作品 0
成都
私信 提问
70个流行的AJAX应用程序或演示代码【转】

Ajallerix : AJAX, simple, fast Web image gallery demo ; at NovellAJAX - microlink pattern tutorial : A microlink is a link that opens up content below it.Ajax BBC News RSS Reade......

唐玄奘
2017/12/04
0
0
jquery的ajax全局事件详解—明河谈jquery

jquery在ajax方面是非常强大和方便的,以下是jquery进行ajax请求时方法模板: $.ajax({ type: "get", url: "", data : {}, beforeSend : function(){ }, success : function(data){ }, compl......

dhole
2013/02/04
0
0
Asp.net MVC2中使用Ajax的三种方式

在Asp.net MVC中,我们能非常方便的使用Ajax。这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用、Jquery、Ajax Helper。分别采用这三种方式结合asp.net mvc去实现一个史上最简单的留...

王二狗子11
2018/01/01
0
0
asp.net的Ajax学习进阶

asp.net的Ajax学习进阶 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.6.3 1.什么是Ajax? 2006年忽如一夜春风来,众多涉及到Web开发的站点都在谈Ajax,那么到底什么是Aja...

晨曦之光
2012/03/09
146
0
Python3基础之学习笔记(十五)-Ajax-文件上传-图片验证码

1. Django 1.1 Ajax 1.1.1 Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,...

GoldenKitten
01/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

[转载]What Your Computer Does While You Wait

What Your Computer Does While You Wait https://manybutfinite.com/post/what-your-computer-does-while-you-wait/ Dec 1st, 2008 This post takes a look at the speed - latency and thr......

MtrS
10分钟前
0
0
springmvc的return “success”源码解读

qqqq

architect刘源源
今天
4
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
2
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部