`
AquariusM
  • 浏览: 146984 次
  • 性别: Icon_minigender_1
  • 来自: 南阳
社区版块
存档分类
最新评论

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

    博客分类：
  • Ajax
Ajax浏览器JavaScript应用服务器CSS 
阅读更多

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使用异步的JavaScript。Ajax应用程序可以发出请求且取得响应，不需要重新加载整个页面。

 

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

 

Web浏览器将HTML和CSS整合成一个页面显示出来，并会运行该页面内的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）。

同一个请求的state和status是有差别的。请求的就绪状态用来告诉浏览器该请求已经处理到什么阶段；初始化、处理中、完成等。请求“完成”不代表请求“成功”所以用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；

documentElement是document对象的一个特殊属性，它总是返回此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（文档对象模型）把构成网页的HTML、CSS以及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），才能保护数据的安全以免于被人窥视。

 

分享到：
| xml基础学习
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics