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

Posted 2020-08-24

第七章：

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的过程，代码：

 

 1         var xmlhttp;
 2         //平稳退化-对象检测技术
 3         //1.创建对象
 4         if(window.XMLHttpRequest){   
 5             xmlhttp = new XMLHttpRequest();   //适用于IE7+、FireFox、Chrome、Safari、Opera
 6         }else{
 7             xmlhttp = new ActiveXObjext("Microsoft.XMLHTTP");    //适用于IE5、IE6
 8         }
 9         //2.确定请求类型、发送请求
10         xmlhttp.open("GET","ajax1.php",true);
11         xmlhttp.send();
12 
13         // xmlhttp.open("POST","t1.html",true);
14         // xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
15         // xmlhttp.send("a=1&b=2");
16 
17         //3.响应请求（readyState 0-请求未初始化;1-与服务器建立链接；2-请求已接受；3-请求处理中；4-请求处理完成）
18         xmlhttp.onreadystatechange = function(){
19             if(xmlhttp.readyState == "4" && xmlhttp.status == "200"){
20                 var p = document.createElement("p");
21                 var pText = document.createTextNode(xmlhttp.responseText);
22                 p.appendChild(pText)
23                 var body = document.getElementsByTagName("body")[0];
24                 body.appendChild(p) ;
25             }
26         }
27 
28         //说在最后：浏览器一般会禁止ajax使用file://协议。 提示跨域请求只支持http等协议 。     所以测试实现时，要安装一个类似于phpstudy的软件。让自己的机器变成一台虚拟服务器。