JavaScript DOM编程艺术-学习笔记（第七章）

时间：2022-02-21 16:01:54

第七章：

1.dom方法创建并且插入标签：（这种方法并没有改变文档的物理内容，而是在改变dom树）

①创建元素节点：createElement();

②内部前插入：appendChild()

③创建文本节点：createTextNode();

④设置属性节点：setAttribute();

⑤外部前插入：父元素.insertBefore(插入的元素，目标元素);                  插入的元素被插入到，目标元素的前面。

⑥没有inserAfter()函数。

2.小知识点：①appendChid(这里面的元素不能加引号，否则是字符串)

②ajax的onreadysatechange（） 这个函数都是小写。不知道为什么不遵循驼峰的写法，初写时，一般会写错。

③在aja post时会设置请求头，即报头，其中Content-type 设置为application/x-www-form-urlencoded；即简单的key-value的形式发送。

此外还可以设置为form-data，一般用于传输文件。（比如图片等）。在工作中向服务器传输图片，是将图片转化成二进制流，然后post去发送，而Content-type则设置为form-data

3.ajax的过程，代码：

         var xmlhttp;

         //平稳退化-对象检测技术

         //1.创建对象

         if(window.XMLHttpRequest){

             xmlhttp = new XMLHttpRequest();   //适用于IE7+、FireFox、Chrome、Safari、Opera

         }else{

             xmlhttp = new ActiveXObjext("Microsoft.XMLHTTP");    //适用于IE5、IE6

         }

         //2.确定请求类型、发送请求

         xmlhttp.open("GET","ajax1.php",true);

         xmlhttp.send();

         // xmlhttp.open("POST","t1.html",true);

         // xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

         // xmlhttp.send("a=1&b=2");

         //3.响应请求（readyState 0-请求未初始化;1-与服务器建立链接；2-请求已接受；3-请求处理中；4-请求处理完成）

         xmlhttp.onreadystatechange = function(){

             if(xmlhttp.readyState == "4" && xmlhttp.status == "200"){

                 var p = document.createElement("p");

                 var pText = document.createTextNode(xmlhttp.responseText);

                 p.appendChild(pText)

                 var body = document.getElementsByTagName("body")[0];

                 body.appendChild(p) ;

             }

         }

         //说在最后：浏览器一般会禁止ajax使用file://协议。 提示跨域请求只支持http等协议 。     所以测试实现时，要安装一个类似于phpstudy的软件。让自己的机器变成一台虚拟服务器。

4.ajax的缺点：可能会导致用户无法使用后退按钮或无法为特定状态下的页面添加书签。

5.“有什么理由让没有js的用户不能登录呢”，作者提倡，应该“先后兼容”的使用ajax：“在原有框架的基础上，用ajax拦住发送到服务器的请求，并将请求转交给XMLHttpResut对象处理。这种情况下，ajax就扮演了一个位于常规站点之上的层”

相关文章