Head First JS阅读笔记之动态数据

最新推荐文章于 2024-10-30 18:24:25 发布

tjl_moby

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量291

点赞数

分类专栏： javascript 文章标签： javascript ajax xml

本文链接：https://blog.csdn.net/tjl_moby/article/details/76651282

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

动态数据.md

我们希望能够把页面的结构和页面的内容能够分开，结构负责框架，数据负责内容。主要涉及到这么几方面的问题。

数据存储 XML（extensible markup language）
数据通信 Ajax (asynchronous javascript and xml)

数据存储方案
XML可以用来创建一切你想创建的东西，ML指标记语言，X…代表了任何事件！
它并不是一门特殊的语言，也不像HTML一样是组既定的标签和属性。XML没有定义任何的标签与属性。

它只是一组标签与属性该如何创建和使用的规则！！！
并且它可以自定义标签！

XML形式上是文本，本质上是规则！

这些规则主要包括：
1. 所有 XML 元素都须有关闭标签，包括空标签也要用/>来结尾
2. XML 标签对大小写敏感,必须使用相同的大小写来编写打开标签和关闭标签
3. XML 必须正确地嵌套
This text is bold and italic
4. XML 文档必须有根元素
5. XML 的属性值须加引号
6. 实体引用

实体引用	字符	意义
<	<	小于
>	>	大于
&	&	和号
'	‘	单引号
"	"	引号

注释
在 XML 中，多个空格会被保留,不会被删节。
XML 以 LF 存储换行

引申到XHTML和HTML之间的差别：

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

数据通信Ajax，动态载入文件至网页

Ajax以request 和response 为中心概念
Ajax应用程序最主要工作的地方是创建自定义的事件处理器handlerRequest()

浏览器送出Ajax请求到服务器，并等待响应，因为是异步的，请求在后台运作，所以此时浏览器还可以处理其他网页事物
服务器收到请求，开始工作，创建响应。服务器端脚本处理Ajax请求并预备相应的数据。
服务器创建给浏览器的响应，并且把内容数据打包，由Ajax响应送回。
浏览器解开响应中打包的XML数据，整合至网页中

Ajax的原理

js有一个内置的对象，XMLHttpRequest(XHR),用于发起Ajax请求并处理Ajax的响应。

对于该对象(readyStates = 4 & status=200)比较重要的一个特性是onreadysatechange。
onreadystatechange特性存储了一个readystate状态改变时被调用的自定义事件处理器handler的引用

XHR对象在不同的浏览器上，有不同的运行代码。并且选用不同的request类型，GET或者POST，也有不同的代码块。

request.onreadystatechange = handler
request.open(type,url,true)

request.open("GET","blog.xml",true);
request.send(null);//请求被传送时没有数据，所以send()的自变量是null

request.open("POST","addblogentry.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");// 设定数据类型
request.send("...&...&...")

注意，这里的GET/POST和HTML里表单的get/post还是有一定的区别。
这里的GET/POST主要是看传送给服务器的数据，是否会改变服务器的状态。
GET是不会改变，主要适用于从服务器获取数据。
POST是会改变服务器的状态，比如说要存储数据到数据库中。
而我们在HTML里面主要指的是加密和不加密传输
另外，Ajax的请求和响应可以用于请求任何类型的数据，而不局限于HTML数据。

为了解决这个问题，我们采用了自定义对象AjaxRequest

封装了XMLHttpRequest标准对象的的自定义对象AjaxRequest，它把底层的XMLHttpRequest对象存储在特性request里面。它的send()方法就负责处理开启(准备Ajax请求)与传送(对服务器发出请求的的细节工作，是AjaxRequest中真正的劳动者。

AjaxRequest.prototype.send = function(type,url,handler,postDataType,postData){
    if(this.request != null){
        this.request.abort();
        url += "?dummy=" + new Date().getTime();

        try{
            this.request.onreadystatechange = hanlder;
            this.request.open(type,url,true);

            if(type.toLowerCase() == "get"){
                this.request.send(null);
            }else{
                this.request.setRequestHeader("Content-Type",postDataType);
                this.send(postData);
            }

        }catch(e){
            alert("Ajax error communicating with the server. \n"+ "Details:"+e);
        }
    }
}

如何处理事件？自定义事件处理器handler

来自服务器的请求，在JS代码中使用自定义的请求处理器回调函数handlerRequest()。(这个函数会在Ajax请求结束后立刻被调用，表示请求已经完全成功)
handlerRequest()主要通过getResponseXML()(数据是XML格式)和getResponseText()(数据是纯文本格式)来提供对响应数据的访问。

var ajaxReq = new AjaxRequest();

function handleRequest() {
    if (ajaxReq.getReadyState() == 4 && ajaxReq.getStatus() == 200) {
      // Store the XML response data
      var xmlData = ajaxReq.getResponseXML().getElementsByTagName("blog")[0];

      // Set the blog-wide signature
      Blog.prototype.signature = "by " + getText(xmlData.getElementsByTagName("author")[0]);

      // Create the array of Blog entry objects
      var entries = xmlData.getElementsByTagName("entry");
      for (var i = 0; i < entries.length; i++) {
        // Create the blog entry
        blog.push(new Blog(getText(entries[i].getElementsByTagName("body")[0]),
          new Date(getText(entries[i].getElementsByTagName("date")[0])),
          getText(entries[i].getElementsByTagName("image")[0])));
      }

      // Show the blog
      showBlog(5);
    }
  }

对于XML格式的数据，显然可以考虑使用DOM来处理XML响应数据。

function getText(elem) {
    var text = "";
    if (elem) {
      if (elem.childNodes) {
        for (var i = 0; i < elem.childNodes.length; i++) {
          var child = elem.childNodes[i];
          if (child.nodeValue)
            text += child.nodeValue;
          else {
            if (child.childNodes[0])
              if (child.childNodes[0].nodeValue)
                text += child.childNodes[0].nodeValue;
          }
        }
      }
    }
    return text;
  }

URL encoding 数据域编码
浏览器通过网页URL传送表单域中的数据给服务器，每段数据需要有自己的名称与值，中间插入等号，每对名称/值中间则以&区隔。

"date=10/04/2008&body=I'm readlly looking forward...&image="

Ajax的POST请求要设定数据类型

"application/x-www-form-urlencoded;charset=utf-8"

URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。