JavaScript.DOM编程艺术读书笔记（第7章）_javascript dom编程艺术第7章-CSDN博客

本文链接：https://blog.csdn.net/weixin_44202459/article/details/88370664

其余章节链接

动态创建标记

document.write的最大缺点是它违背了“行为应该与表现分离”的原则
innerHTML属性将替换元素中的全部内容，不会返回任何对刚插入的内容的引用
document.createElement(nodeName),创建新节点，只要使用该方法，最好把新创建出来的元素赋给一个变量，例：

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

parent.appendChild(child)，将节点插入节点树，该方法还可以用来连接那些尚未成为文档树一部分的节点
document.createTextNode(text)，创建文本节点
parentElement.insertBefore(newElement,targetElement)，把一个新元素插入到一个现有元素的前面
DOM本身没有提供inserAfter方法，但可以利用已有的DOM方法和属性编写一个insertAfter函数：

function insertAfter(newElement,targetElement){
	var parent = targetElement.parentNode;
	if(parent.lastChild == targetElement){
		parent.appendChild(newElement);
	}else{
		//把新元素插入到目标元素的下一个兄弟元素之前
		parent.insertBefore(newElement,targetElement.nextSibling);
	}
}

Ajax，异步加载页面内容的技术，可以做到只更新页面中的一小部分，有自己的适用范围，依赖JavaScript，其优势在于对页面的请求以异步方式发送到服务器，而服务器不会用整个页面来相应请求，不会打断用户的浏览体验
Ajax技术的核心就是XMLHttpRequest对象，这个对象充当着浏览器中的脚本（客户端）与服务端之间的中间人的角色，JavaScript通过该对象可以自己发送请求，同时也自己处理响应
XMLHttpRequest的open方法，用来制定服务器上将要访问的文件，指定请求类型：GET、POST或SEND，第三个参数用于指定请求是否以异步方式发送和处理

var request = XMLHttpRequest();
request.open("GET","example.txt",true);

onreadystatechange函数，在服务器给XMLHttpRequest对象送回响应的时候被触发执行

//立即调用函数，函数名后加括号
request.onreadystatechange = function(){
	//处理响应
}
//引用函数，在onreadystatechange被触发时执行函数，函数名后不加括号
request.onreadystatechange = function

服务器再向XMLHttpRequest对象发回响应时，浏览器会更新readystate属性的值，它有5个可能的值：0表示未初始化，1表示正在加载，2表示加载完毕，3表示正在交互，4表示完成。只要readystate属性的值变成了4，就可以访问服务器发送回来的数据了
访问服务器发送回来的数据要通过两个属性来完成：responseText属性，用于保存文本字符串形式的数据；responseXML属性，用于保存Content-Type头部中指定为"text/html"的数据，其实是一个DocumentFragment对象
在使用Ajax是，千万要注意同源策略。使用XMLHttpRequest对象发送的请求只能访问与其所在的HTML处于同一个域中的数据，不能向其他域发送请求（Ajax不可以跨域）
异步请求中，脚本在发送XMLHttpRequest请求之后，仍然会继续执行，不会等待响应返回，因此最好把相应的代码都转移指定给onreadystatechange属性的那个函数中
使用Ajax时，必须在向服务器发出请求和服务器返回响应时，给用户明确的提示
Hijax，渐进增强地使用Ajax，构建Ajax网站最好的方法，是构建一个常规的网站，然后用Ajax拦截发送到服务器的请求，并将请求转交给XMLHttpRequest对象处理