《Head Rush Ajax》--深入浅出Ajax学习笔记

1、异步应用程序是使用JavaScript对象做出请求,而并不是提交表单。

2、请求与响应是由Web浏览器处理,而不是直接由JavaScript代码处理。

3、一旦web浏览器得到异步请求的响应,它会以服务器的响应“回头调用”JavaScript代码。

 

<div>是一个可以持有的相关元素(element)的容器元素,并允许你以一个css规则让所有的元素有统一的样式。

 

<div id="menu">

  <a href="home.html">home</a>

  <a href="books.html">writing</a>

  <a href="links.html">resources</a>

  <a href="lib.html">library</a>

</div>

使用div可以把类似用途的元素集合到一起。

 

<span>可以让行内文本(inline text)和周围之间有一点间隔。你可以利用css为你的<span>元素设定样式而轻易地装饰文本。

<span>元素不会创建一个新的文本块儿,但是仍然可以通过css样式设定。

<span>元素可以装饰文本,但是不必开始一个新的段落或块。

 

Ajax使用异步的JavaScriptAjax应用程序可以发出请求且取得响应,不需要重新加载整个页面。

 

异步的JavaScript不会等候服务器的响应,即使服务器正在处理请求,用户还可以继续使用页面。

 

Web浏览器将HTMLCSS整合成一个页面显示出来,并会运行该页面内的JavaScript程序代码。

 

Ajax应用程序中,服务器通常只会送出你需要的数据,不会送出其他的HTML和外观呈现方式。

 

使用JavaScript可以发出同步或者异步的请求。

 

JavaScript提供真个事件处理器,当特定事件发生时就调用JavaScript程序代码。onChange()以及onClick()就是两个常用的事件处理器。

 

浏览器一直都知道请求正处于何种就绪状态,而你的JavaScript程序代码可以取得这样的信息。

 

通过请求对象的onreadystatechange属性,你可以让你的浏览器在每次就绪状态改变时运行特定的JavaScript函数。

 

当一个请求的就需状态是“4”,表示该请求已经被处理完毕,浏览器已经接收到来自服务器的响应。

 

事件处理大集合:

onChange:任何时候,只要表单字段有改变,onChange事件就会被触发。例如,在字段内输入一个新的值或者清除现有的值。

 

onFocus:不管用tab键的方式还是点击鼠标的方式,只要一个字段取得焦点,则依附在onFocus时间上的javaScript代码就会执行。

 

onBlur:不管用tab键还是点击鼠标的方式,只要用户离开一个字段,那么依附在onBlur事件上的javaScript函数就会被运行。

 

如果利用DOM对网页做出修改,浏览器会立刻更新网页。

 

浏览器会对请求URL进行缓存处理。。。

1:你的程序代码对浏览器做出请求

大多数的Ajax应用程序一开始就根据事件(例如:电话号码被输入)运行javaSciprt函数。JavaScript建立一个请求URL并送出一个请求到该URL。请求来自浏览器而不是直接来自你的javaScript

2:服务器返回一个响应

当响应被送到浏览器,你所指定的回调函数就会运行。但如果浏览器将请求URL进行缓存处理的话,就会把此URL和服务器的响应记录下来供以后使用。

如请求是:getUpdateBoardSales-ajax.php 服务器响应:1643

3:你有了一个动态的应用程序

这个时候你的JavaScript回调函数可以利用基于服务器的响应的值来更新此网页。在这个过程中不需要提交表单,也不需要重绘整个页面。

4:你的程序代码对web服务器发出另一个请求

遇上一个一样请求被送到服务器的getUpdateBoardSales-ajax.php脚本进行处理;

5:浏览器让你的程序代码可以使用响应

浏览器发出它之前对此URL做出过的请求,且在缓冲区还保留着当时的响应,所以它决定帮你省一些时间,不送出该请求,而是直接把缓存中的响应交给你的程序代码。

忽然间你的应用程序每次都响应相同的数据。你的回调函数取得的数据不是最新的,而且你的网页不会更新信息。解决办法可以加入一些可变的参数:如url=url+"?dummy="+new Date().getTime();

 

问题:

我现在知道请求是如何到服务器上的。但如果请求URL要求运行的程序在服务器上找不到,为何浏览器还会运行我们的回调函数?难道它不应该向用户报告错误码?

 

答:浏览器一定会运行回调函数,而且它也确实报告了错误。

浏览器一定会运行回调函数,因为这样你才有机会对服务器对你的请求所作出的处置进行响应。因为你使用的是异步请求,回调是你唯一可以写程序代码处理服务器响应的地方。浏览器为了帮助你处理响应,它同时提供请求的就绪状态(state)和请求的状态码(status)。

同一个请求的statestatus是有差别的。请求的就绪状态用来告诉浏览器该请求已经处理到什么阶段;初始化、处理中、完成等。请求“完成”不代表请求“成功”所以用status说明这一点。

如果程序有任何问题,服务器会通过状态码(status code)来报告。状态码指示在请求期间发生了什么事,以及事情的后果是否如你所愿。所以即使你知道请求已经完成,你仍然需要检查状态码以确定一切没有问题。

 

如果找到程序请求且没有遇到任何问题,返回“200”状态码。

如果服务器找不到URL指定的程序,状态码是:“404”。

 

注意:当服务器的响应完成之后,请求对象的就绪状态就被设定为“4”,然后及时你再度使用请求对象,也无法重新设定其就绪状态。所以必须重新设定请求对象。

 

问:如果在回调函数内直接将请求对象的就绪状态设定为“0”,这样不是比较简单吗?

答:理论上没错,但是readyState是只读的属性,不能直接在javaScript程序中设定,只有浏览器可以去改变请求对象的readyState属性的值。

 

 

当调用请求对象的open()方法时,第三个参数是用来指定是否为异步:“true”表示异步,“false”表示同步。

DOM允许你改变网页内容而不需要重载页面。

 

对于Web浏览器来说次序很重要。

当浏览器取得你的HTML且将它表示为一颗树的时候,浏览器必须保持文本和元素的次序,否则页面的段落次序可能会有错误,黑体活下划线可能会运用在错误的字上面。

 

浏览器将你的标记组织成一个“树状”结构。Web浏览器将你的网页视为是一棵树,由元素、文本、属性以及其他标记所组成的树。

 

一种新树:DOM

一旦浏览器持有<html>在顶端的标记,它就可以为每一个节点创建一个新对象。最后的结果是有一大堆对象互相连接。

这整个东西通常被称为“DOM”树,因为它将你的文档用对象的方式标示,并将你的标记转成一个树状模型。

 

你可以在JavaScript中利用“document”变量取得这棵树。

取得文档的根元素:

通过documentElement属性,你可以取得HTML文档的<html>根元素。

Var htmlElement=document.documentElement

documentElementdocument对象的一个特殊属性,它总是返回此DOM树的根元素。

通过id属性找到一个元素:

getElementById()

节点几乎知道所有的事:DOM内一切都是节点,元素和文本时特殊类型的节点,但它们还是节点。只要你有节点,就可以利用nodeName取得节点的名字,利用nodeValue取得节点的值。

但是,必须注意你在处理的节点是什么类型,否则,当你预期取得元素名字或文本的字符串时可能会得到空值。元素节点有一个名字,想“div”或“img”,但是没有值。文本节点没有名字,但是有值,也就是节点内的文本。

Node            notetype           nodeName              noteValue

Div             元素节点          div                null/undefined

Em             元素节点           em                null/undefined

"bread-first"      文本节点            null/undefined         "bread-first"

 

元素节点的noteValue是未被定义的。

文本节点的noteName就是它的文本。

元素节点都有一个noteName,文本节点都没有noteName

 

Javascript可以通过使用特殊的关键字this来让你知道究竟是DOM树中的那个节点调用此函数。

一个元素只能有一个父亲。

所以当你把一个元素加入到另一个div下面时,在上面的父子关系会自动断开。

 

浏览器利用DOM(文档对象模型)把构成网页的HTMLCSS以及JavaScript标示成一棵对象树。

 

你可以利用javaScript查看甚至改变DOM树。你对DOM树所做的更改会自动反映到浏览器所呈现的画面上。

 

你可以在任何Web应用程序中使用DOM,不过是在异步的Web应用程序中。

 

一棵DOM树是由许多不同的节点组成的,包括了:元素节点、属性节点以及文本节点。

 

一个元素只可以有一个父亲,如果你改变了某个元素的父亲或者将此元素加入另一个元素中(成为其孩子),就等于将该元素和原父亲之间的关系打断(也就是在DOM树中将该元素从原父亲处移除)。

 

你可以用javascript代码为DOM树加入css样式和javascript事件处理器。

GET将请求数据放在URL中。

POST请求所送出的数据和请求URL是分开的。

在一个GET请求中,数据是请求URL的一部分,所以一定是文本,但是在POST请求中,你可以送出图像或者XML,所以必须告诉服务器,数据是什么类型的。

 

request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

服务器可以通过请求标头从浏览器取得消息。

 

Hypertext Transfer Protocol

  POST /placeOrder.php HTTP/1.1

Request Method:POST

Request URI:/placeOrder.php

Request Version:HTTP/1.1

Host:www.headfirstlabs.com

Keep-Alive:300

Connection:keep-alive

Content-Type:application/x-www-from-urlencoded

Content-Lenth:121

 

这是你的javascript送给服务器的请求。

Content-Type是你加入到请求中的请求标头。

 

服务器利用响应标头将消息送给浏览器。

 

服务器送回一个响应标头和状态码。

Http/1.1 400 Bad Request

  Request Version :HTTP/1.1

  Response Code:400

Date:Web,01 Mar 2006 21:27:39 GMT

Server:Apache

X-Powered-By:PHP/4.3.11

Status:No order was received.

Connection:close

Transfer-Encoding:chunked

Content-Type:text/html

 

这是服务器送回浏览器的数据。

 

每个浏览器都有不同的URL长度,包括了作为URL的一部分的任何数据。对大部分浏览器来说,长度限制在2000个字符。

如果使用POST请求送出数据就不会有长度限制。

你可以利用POST请求送出不同类型的数据:纯文本、XML、二进制对象(例如图像和文件)以及你的浏览器所能编码的任何东西。

 

除非请求内部附带了内容类型,否则服务器不知道POST数据是什么类型。

你可以使用setRequestHeader()以传送额外的消息给服务器。

你可以使用“Content-Type”请求标头告诉服务器POST数据是什么类型。

内容类型如果是:“x-www-form-urlencoded”,就表示使用的数据格式是纯文本形式的名/值对,就像使用GET方式送出表单时的URL编码方式。

 

POST请求之比GET请求更安全一点点,两者都需要额外的安全层(例如SSL),才能保护数据的安全以免于被人窥视。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
智慧校园整体解决方案是响应国家教育信息化政策,结合教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础,旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变,通过自动数据采集、智能分析和按需服务,实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通,确保系统能够满足不同用户角色的需求,并实现数据和资源的整合与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面,构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等,以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能,增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术,实现人员和设备的智能管理,提高校园运营效率。 智慧教学部分,方案提供了智慧学习系统和精品录播教室方案,支持专业级学习硬件和智能化网络管理,促进个性化学习和教学资源的高效利用。同时,教学质量评估中心和资源应用平台的建设,旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理,通过智慧教室管理系统实现教室环境的智能控制和能效管理,打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设,将作为智慧校园的核心和入口,提供教务、一卡通、图书馆等系统的集成信息。 总体而言,智慧校园整体解决方案通过集成先进技术,不仅提升了校园的信息化水平,而且优化了教学和管理流程,为学生、教师和家长提供了更加便捷、个性化的教育体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值