与服务器通信:发送请求和处理响应

1 、处理服务器响应
XMLHttpRequest对象提供了两个可以用来访问服务器响应的属性:
responseText将响应提供为一个串
responseXML将响应提供为一个XML对象
1.1 、使用innerHTML 属性创建动态内容
HTML元素的innerHTML属性是一个简单的串,表示一组开始标记和结束标记之间的内容
通过结合使用responseText和innerHTML,服务器就能生成HTML内容,由浏览器使用innerHTML属性来处理
1.2 、将响应解析为XML
服务器不一定按XML格式发送响应,只要Content-Type响应首部正确地设置为text/plain(如果是XML,Content-Type响应首部则是text/xml),将响应作为简单文本发送是完全可以的,复杂的数据结构就很适合以XML格式发送。
浏览器把XML看作是遵循W3C DOM规范的XML文档。W3C DOM指定了一组丰富的API,可用于搜索和处理XML文档
W3C DOM
文档对象模型(DOM)是与平台和语言无关的接口,允许程序和脚本动态地访问和更新文档的内容、结构和样式。文档可以进一步处理,处理的结果可以放回到所提供的页面中
W3C DOM 和JavaScript
DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。
JavaScript是用于访问和处理DOM的语言。文档中的每个元素都是DOM的一部分,这就使得JavaScript可以访问元素的属性和方法
DOM独立于具体的编程语言,可以使用任何脚本语言访问DOM,这要归功于其一致的API
1.3 、使用W3C DOM 动态编辑页面
在传统Web应用中,我们通常使用来自服务器的新的HTML流来刷新整个页面,并通过提供新的HTML来重新定义用户界面。而在Ajax应用中,用户界面的更新主要是使用DOM来完成的。Web页面中的HTML标签被组织成一个树状结构,树的根节点是<HTML>,它代表这个文档,在它内部的<BODY>标签代表文档的主体部分,是可见的文档结构的根节点。在文档主体之内,有表格、段落、列表以及其他的标签类型,每个标签之中还可能有其他的标签
Web页面的DOM表示也是一个树状结构,由元素或节点组成,节点还可能包含很多的子节点。JavaScript引擎通过全局变量document来公开当前Web页面的根节点,这个变量是所有DOM操作的起点
DOM中元素之间的关系可以看作是HTML清单的镜像,这种关系是双向的,修改DOM将会改变HTML标记,随之会反映在页面的表示上
2 、发送请求参数
GET方法把参数作为名/值对放在请求URL中传递。资源URL的最后有一个(?),问号后面就是名/值对。名/值对采用name=value的形式,各个名/值对之间用(&)分隔
采用POST方法向服务器发送命名参数时,与采用GET方法几乎是一样的。这两种方法的区别是:POST方法将参数串放在请求体重发送,而GET方法是将参数追加到URL中发送
HTML form元素允许通过将form元素的method属性设置为GET或POST来指定所需的方法。在提交表单时,form元素自动根据其method属性的规则对input元素的数据进行编码。XMLHttpRequest对象没有这种内置行为。要由开发人员使用JavaScript创建查询串,其中包含的数据要作为请求的一部分发送给服务器。不论使用的是GET请求还是POST请求,创建查询串的技术是一样的。唯一的区别是:当使用GET发送请求时,查询串会追加到请求URL中,而使用POST方法时,则在调用XMLHttpRequest对象的send()方法时发送查询串
2.1 、请求参数作为XML 发送
可以把XML串作为请求体的一部分发送到服务器,这与POST请求中将查询串作为请求体的一部分进行发送异曲同工。服务器可以从请求体读到XML,并加以处理
2.2 、使用JSON 向服务器发送数据
通过串连接来创建XML串并不好,这也不是用来生成和修改XML数据结构的健壮技术
JSON 概述
XML的一个替代方法是JSON,JSON是一种文本格式,它独立于具体语言,但使用了与C系列语言类似的规定。JSON建立在以下两种数据结构基础上,当前几乎所有编程语言都支持这两种数据结构:
名/值对集合
值的有序表
JSON可以作为异构系统之间的一种数据互换格式
JSON对象是名/值对的无序集合。对象以{开始,以}结束,名/值对用冒号分隔。
JSON数组是一个有序的值集合,以[开始,以]结束,数组中的值用逗号分隔。
值可以是串、数值、对象或者数组,因此结构可以嵌套
JSON编码比XML编码简短,JSON编码比较小,所以如果在网络上发送大量数据,可能会带来显著的性能差距
JSON与很多编程语言绑定,不论在服务器端使用何种技术,都能通过JSON与浏览器通信
 
 
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值