AJax技术

Ajax深入学习笔记(2)

字号+ 作者:H5之家 来源:H5之家 2017-06-08 12:03 我要评论( )

使用该方式必须设置自定义请求头部信息Content-Type,以说明请求的内容类型。这样服务器就会根据请求的内容类型来解析表单中的数据。 在通过post方式请求表单中,在open和send之间,要添加request.setRequestHeader

使用该方式必须设置自定义请求头部信息Content-Type,以说明请求的内容类型。这样服务器就会根据请求的内容类型来解析表单中的数据。
在通过post方式请求表单中,在open和send之间,要添加request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)
如果不设置content-type头部,那么发送给服务器的数据就不会出现在$_POST超级全局变量中。

在来看看新一代的XHR即XHR2级对象又提供了哪些方法吧。

XHR2级对象

1. FormData类型
用于将表单数据序列化和创建和表单格式相同的数据:
方式一:
var data = new FormData();
data.append(“key”,”value”);

方式二:
var data = new FormData(form对象);
以上代码应该在open和send(data)之间。

2. overrideMimeType(“text/xml”)方法
重写服务器返回的MIME类型。强迫XHR对象将响应当做XML而非纯文本来处理

3.超时设定(IE8+支持)
XHR对象支持timeout属性和ontimeout事件处理程序。timeout属性用于设置请求等待响应的时间,若超出了则终止请求,然后触发timeout事件,调用ontimeout事件处理程序。
终止请求后readyState属性可能已经为4了,但是如果终止请求后再访问status属性(响应状态码)会报错,因此可将访问该属性的代码用try、catch括起来。

那么我们通过XHR对象传递的数据都有哪些格式呢?下面再来看看常用的几种数据格式。

传送的数据格式 1.XML

XML是一种数据格式,在异步应用程序中常有以下两种用法:
一是以XML格式从网页发送HTTP请求给服务器
二是以XML格式在网页中接收服务器的响应

客户端发送请求
XML格式的请求和响应比普通文本慢,消耗内存更多,因为要添加标签和语义。
将数据包装为XML格式其实也是使用字符串的形式,不过字符串中有相应的标签。即发送的数据都必须是文本。
以XML格式化数据时应先设置请求头部:
xhr.setRequestHeader(“Content-type”,”text/xml”)。若果是发送普通文本则类型为text/plain
最好是使用普通文本的方式发送请求数据。
发送文本格式的请求(名/值对)和发送XML格式包装后的数据例子讲解:
服务器发送响应
比较适合用XML格式的数据,原因是若发送的响应为文本,其中包含多个名称/值对,服务器程序用某种符号连接这些对儿(没有一个标准),而客户端必须采取措施将这些响应文本(字符串)中的对儿依次解析出来。(而服务器端技术提供了多种方法来根据名称获取值,所以客户端发送请求时适合用名称/值对这种方式)。
XML响应可以是以XML格式化的纯文本,客户端中通过xhr.responseText属性来获取,这时仍出现了需要解析字符串的问题,所以不应该以这种方式来发送XML响应。应当使用XML文档,客户端可通过xhr.responseXML获取,将该文档当成一个DOM Document对象,在客户端可以利用DOM来解析该文档。

2. json

**json基本概念和格式

当需要在客户端和服务器端之间传递大量数据时,使用Jason格式的数据会很灵活,便于解析。
Json是一种存储和交换文本信息的语法,采用键值对方式组织。Json是独立于语言的,可被任何语言解析和生成。
json和XML相比有这样一些优点:
长度短小,读写速度更快;可以使用JavaScript内建的方法进行解析,也可以直接转换成JavaScript对象,非常方便。
json数据的书写格式为名称-值这样的对儿:

"name":value

注意名称有引号,当value为字符串时也应该加引号。
value的数据类型可为:

  • null
    举一个json文件的例子:
  • { "staff":[ {"name":"anna","age":20}, {"name":"mike","age":10}, {"name":"lily","age":30} ] }

    最外层的大括号{}表示这是一个json对象。

    **在JS中解析json
    通过下述几种方式可以把一个json字符串解析为一个JavaScript对象。

    (1)使用eval()解析
    可以浏览器控制台中进行如下代码测验:

    var jsondata='{"staff":[{"name":"anna","age":20},{"name":"mike","age":10},{"name":"lily","age":30}]}'; //注意这个json字符串要放到同一行;服务器端的返回的数据应该写成这样一个json对象字符串 var jsonobj=eval('('+jsondata+')'); //eval使用这种方式解析 alert(jsonobj.staff[0].name);

    采用eval,不仅会解析成一个JavaScript对象,还会执行json字符串中的方法,例如把”age”:20改为”age”:alert(“hello”),则会执行这个alert语句。

    (2)使用JSON.parse()解析

    var jsonobj=JSON.parse(jsondata);

    使用这种方式解析不会执行json字符串中的方法,会报错,json字符串语法不合法。

    由于eval方法不会检查语法,这样很危险,如果接收的json数据中包含恶意代码会被执行。

    检查json语法的格式化校验在线工具:jsonlint.com

    readyStateChange事件补充说明

    该事件的作用是提供了与文档或元素的加载状态有关的信息。支持该事件的对象都有一个readyState属性。该属性有如下几个值:
    uninitialized(未初始化):对象存在但尚未初始化
    loading(正在加载):对象正在加载数据
    loaded:对象加载数据完成
    interactive:可以操作对象了,但韩没有完全加载
    complete:对象已经加载完毕
    并非所有的对象都会经历这几个阶段。

    jQuery中的Ajax

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 关于学习ajax的总结

      关于学习ajax的总结

      2017-06-08 12:04

    • ajax技术基础详解

      ajax技术基础详解

      2017-04-17 09:00

    网友点评