文档章节

Ajax快速入门

詹真琦
 詹真琦
发布于 2013/12/12 16:57
字数 1054
阅读 16
收藏 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;
   	 }
 	}


上面就是AJAX最基本的内容,了解这些,再看两个实例,就可以去学习AJAX的框架了~


AJAX的框架发展到现在实在太多了,这里建议使用jquery~

本文转载自:http://blog.csdn.net/zeroblack/article/details/17240683

詹真琦
粉丝 18
博文 13
码字总数 4589
作品 0
成都
程序员
私信 提问
新世代网站开发技术ASP .NET AJAX——章立民北京研讨会邀请函

目前,在网站开发技术的快速演进中,AJAX 已被广泛地视为推动新一代网站的核心技术。通过它可以带来前所未有的网站使用感受——包括高效能、高交互性与可定制化。而 Microsoft ASP.NET AJAX...

章立民
2007/06/22
0
0
Web开发系列 - JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子...

长征2号
2017/01/05
0
0
Spring Security4实战与原理分析视频课程( 扩展+自定义)

Spring Security概述与课程概要介绍 Spring Security快速入门(基于XML) Spring Security快速入门(基于XML) URL匹配详解 自定义登陆 配置退出 Ajax登陆退出 JDBC认证 层级角色关系 认证体...

刘宗泽
2018/06/26
0
0
ajax 快速入门

ajax作用:ajax 是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术.(实现浏览器与服务器之间的数据交互,实现页面的无刷新请求服务器,提高用户体验) 基本使用: 1.创建ajax对...

a69694510
2017/07/01
0
0
前段也要会点Ajax【附视频和源码】

这是我见过最务实的jquery教程,没有所谓的几十几百节课,全程干货。在此推荐给大家,要是早些看了这套视频,哪里还用看那么多废话,哎... 1.jQuery快速入门 2.jQuery对文本框、多行文本框、...

迅风168
2016/10/20
252
1

没有更多内容

加载失败,请刷新页面

加载更多

Java设计模式-模板方法模式

定义 Define the skeleton of an algorithm in an operation,deferring some steps to subclasses.Template Method lets subclasses redefine certain steps of an algorithm without changi......

别打我会飞
31分钟前
0
0
百度T8架构师细谈Java架构进阶扫盲清单!(附图文)

普通程序员写代码叫编码,而架构师写代码就叫架构设计。这是因为他们在编码时考虑的角度完全不同。普通程序员只需要考虑如何实现功能,而优秀的程序员(预备架构师)却更多考虑性能、可读性、...

编辑之路
33分钟前
1
0
lombok的一个踩坑记录

lombok的类如下所示: package com.divx.service.model.task;import com.divx.service.model.BaseTypeMedia;import lombok.Data;/** * @author wuzhilang * @Title: QuestionResult ......

无知的小狼
今天
2
0
如何使用markdown

我没有导入相应的包 这个用的还是有些问题 而且显示的时候格式问题还没解决 <div class="blog_editor" style="margin: 0 auto;width:60%;height:1000px;background-color: white;"> <div s......

南桥北木
今天
4
0
纯手写SpringBoot框架之注解方式启动SpringMVC容器

使用Java语言创建Tomcat容器,并且通过Tomcat执行Servlet,接下来,将会使用Java语言在SpringBoot创建内置Tomcat,使用注解方式启动SpringMVC容器。 代码实现。 1.pom.xml文件,需要依赖的jar...

Java老王
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部