Ajax总结-1

基于2013年版本之前的总结:

一:什么是Ajax?

        Ajax的技术产生:

                -它被认为是Asynchronous JavaScript and XML的缩写,现在,允许浏览器与服务器通信

        而无需刷新当前页面的技术都被叫做Ajax。

                -它是一种不用刷新整个页面就可以与服务器进行通讯的办法:

                      1.flash

                      2.java applet

                      3.框架:如果使用一组框架构造了一个网页,可以只更新其中一个框架,而不必惊动整个

    页面。

                    4.隐藏的iframe

                    5.XMLhttprequest:该对象是对javascript的一个扩展,可以使网页与服务器进行通讯。

       是创建ajax应用的最佳选择,实际上通常把ajax当成XMLHttpRequest对象的代名词。

二:ajax的工作原理:



三:ajax工具包

 这东西并不是一个新技术,它实际上是几种技术,每一种技术各自完成一个职能,以一种全新的方式聚合在一起。

-服务器端语言:服务器需要具备向浏览器发生特定信息的能力。 ajax与服务端用什么语言无关。

-xml :一种数据传输的格式。ajax程序需要用一种格式化的文本在服务器和客户端之间进行信息传递,xml是其中的一种

-dom :文档。 实现动态显示和交互、

-xmlhttp 组件XMLHttpRequest对象进行异步数据读取

-使用JavaScript绑定和处理所有数据

四:ajax的缺陷

ajax不是完美的技术,使用ajax 它的一些缺陷如下:

-由JavaScript和ajax引擎导致的浏览器兼容

-页面局部刷新,导致后退功能失效

-对流媒体的支持没有flash javaapplet好

-一些手持设备(如手机、pda等)支持性差

五:XMLHttpRequest介绍

`XMLHttpRequest这玩儿最早是在ie5里边以Activex组件的形式实现的,不是w3c标准。

`创建XMLHttpRequest对象(由于它不是标准的,所以实现方法不统一)

-IE把XMLHttpRequest实现为一个本地的JavaScript对象。

-XMLHttpRequest在不同的浏览器上的实现是兼容的。所以可以用同样的方式访问XMLHttpRequest实例上的属性和方法,

而不讨论这个实例创建的方法是啥

-------------------------------------说这老半天,这个对象咋创建呢?

创建XMLHttpRequest对象:

为了每次写ajax的时候都节约一点时间,可以把对象检测的内容打包成一个可复用的函数:

function getHTTPObject(){

var xhr=false;

if(window.XMLHttpRequest){

xhr=new XMLHttpRequest();

}else if(window.ActiveXObject){

xhr=new ActiveXObject("Microsoft.XMLHTTP");

}

return xhr;

}

虽然都能看懂这代码,还是说明一下吧,

它对window.XMLHttpRequest的调用会返回一个对象或null,if语句会把调用返回的结果看做是true或者false(如果返回对象则为true,返回null则为false)。如果XMLHttpRequest对象存在,则把xhr的值设为该对象的新实例。如果不存在,就去检测ActiveXObject的实例是否存在,如果答案是肯定的,就把XMLHTTP的新实例赋给xhr。

XMLHttpRequest的方法:

方法()描述
abort()    停止当前请求
getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”)返回制定首部的串值
open(“method”,“url”)

建立对服务器的调用。Method参数可以使GET、POST或PUT。url参数可以是相对URL或者绝对URL

send(content)向服务器发送请求
setRequestHeader(“header”,“value”)post请求用这个。把指定首部设置为所提供的值,在设置任何首部之前必须调用open()

实践一下

点击a标签,弹出另一个文本的内容

<script>

window.οnlοad=function (){

1.获取a节点,并为其添加点击事件

document.getElementsByTagName("a")[0].οnclick=function(){

3.创建一个XMLHttpRequest对象

var request=new XMLHttpRequest()

4.准备发送请求的数据:url

var url =this.href;

var method="GET"

5.调用XMLHttpRequest对象的open方法

request.open(method,url )

6.调用XMLHttpRequest对象的send方法

request.send(null);

7.为XMLHttpRequest对象添加onreadystatechange响应函数

request.onreadystatechange=function(){

   8.判断响应是否完成:XMLHttpRequest对象的onreadystatechange的属性值为4的时候

    if(request.readyState==4){

        9.再判断响应是否可用:XMLHttpRequest对象的status属性值为200

        if(request.status==200||request.status==304){ 

            10.打印响应结果:responseText

             alert("request.responseText");

        }

    }

}

2.取消a节点的默认行为

return false;

}

}

</script>

<body>

<a href="1.text">点我</a>

</body>

六、ajax的数据格式

。在服务器端Ajax是一门与语言无关的技术,在业务逻辑层使用任何服务器语言都可以。

。从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送,服务器端的编程语言只能以如下3中格式返回数据

-XML

-JSON

-HTML

解析HTML

。html由一些普通文本组成,如果服务器通过XMLHttpRequest发送HTML,文本将存储在responseText属性中

。不必从responseText属性中读取数据,它已经是希望的格式,可以直接将它插入到页面中。

。插入HTML代码最简单的方法是更新这个元素的innerHTML属性。





优点:

1.从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析

2.HTML的可读性好

3.HTML代码与innerHTML属性搭配效率高

缺点:

1.如果需要通过ajax更新一篇文档的多个部分,HTML不合适

2.innerHTML并非DOM标准(问题不大,浏览器都支持)


解析XML

。XML格式 ,所以需要使用responseXML 来获取

。结果不能直接使用,必须先创建对应的节点,再把节点插入到对应的元素里边去(说白了就是把XML里边的数据,放到html的节点里边去)


优点:

1.XML是一种通用的数据格式(它就是为了数据传输而生的)

2.不必把数据强加到已定义好的格式中,而是要为数据自定义合适的标记

3.利用DOM可以完全掌控文档

缺点:

1.如果文档来源于服务器,就必须得保证文档含有明确的首部信息。如果文档类型不明确,那responseXML的值就是空的了

2.当浏览器接收到长的XML文件后,DOM解析可能会很复杂


json简介:(JSON(JavaScript Object Notation) 一种简单的数据格式,比xml更轻巧。JSON是JavaScript原生格式,意味着在JavaScript中处理JSON数据不需要任何特殊的api或工具包)

解析JSON

。JSON只是一种文本字符串,他被存储在responseText属性中

。为了读取存储在responseText属性中的JSON数据,需要根据JavaScript的eval语句,函数eval会把一个字符串当做它的参数,然后这个字符串会被当做JavaScript代码来执行,因为JSON的字符串就是由JavaScript代码构成的,所以它本身是可执行的


。JSON提供了json.js包,下载http://www.json.org/json.js后,使用parseJSON()方法将字符串解析成JS对象



优点:

。作为一种数据传输格式,JSON与XML很相似,但是它更加灵巧

。JSON不需要从服务器发送含有特定内容类型的首部信息

缺点:

。语法过于严禁

。代码不易读

。eval函数存在风险


jquery中的ajax

。jquery对ajax操作进行了封装,在jquery中最底层的方法是$.ajax(),第二层是load(),$.get()和$.post(),第三层是$.getScript()和$.getJSON()

load方法:

load()方法是jquery中最简单和常用的ajax方法,能载入远程的HTML代码并插入到DOM中

它的结构是load(url,[data],[callback])



总结:

1.什么是ajax ?不用刷新页面,但可以和服务器进行通讯的方式,使用ajax的主要方式是XMLHttpRequest对象

2。使用XMLHttpRequest对象实现ajax

3.ajax输出数据的三种方式:

a.XML:笨重,解析困难,但XML是通用的数据格式

b.HTML:不需要解析可以直接放到文档中,若仅更新一部分区域

c.小巧,有面向对象的特征,且有很多第三方的jar包可以把java对象或集合转换为json字符串

4.使用jquery完成ajax操作

a.load方法:可以用于HTML文档的元素节点,把结果直接加为对应节点的子元素,¥

b.$get,$post,$getJSON:更加灵活,出去使用load方法的情况,大部分都使用这三个方法


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宋哈哈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值