1. DOM操作

1.1 完整的JavaScript操作的组成

1. js核心 ECMA Script
2. DOM Document Object Model文档对象模型：js操作页面元素
3. BOM Browser Object Model浏览器对象模型：js操作浏览器

1.2 使用DOM获取页面元素

1. 使用id获取修改双标记元素对象
   传统方法：

   //找到元素对象
   var oDiv = document.getElementById("id");
    //通过元素对象的innerHTML属性获取、修改内容文本
   var text= oDiv.innerHTML;
   oDiv.innerHTML="...";
   //按照标签获取元素
   var entrys = document.getElementsByTag("div");
   

   简化写法：<ANY id=“d1”></ANY>

   var text=d1.innerHTML;
   d1.innerHTML="...";
   

2. 获取、设置表单控件的数据
   DOM中表单控件通过DOM对象的value属性来获取

   //通过id获取表单控件对象
   //通过对象value属性获取值
   var text=t1.value;
   t1.value="...";
   

3. HTML元素事件
   1）定义：事件就是通过用户的行为触发的操作；
   2）事件的部分类型：在<script>中定义方法，在HTML元素中添加事件函数onclick=“getMsg()”
   onclick="方法()"元素被单击时调用；
   onblur="方法()"元素失去焦点时调用；
   onfocus="方法()"元素获得焦点时调用；
   3）body标签专有事件
   <onload=“方法”></body>
   当页面加载立即调用该方法

2 AJAX

1. 同步Synchronous：在一个任务进行时不能执行其它任务。
   同步访问：浏览器向服务器发送请求时，浏览器只能等待服务器的响应，不能做其它事情。如：地址栏访问网页、a标签跳转以及submit表单提交等；
2. 异步Asynchronous
   可以在任务启动的同时开启其它任务。
   异步访问：浏览器在向服务器发送请求时，不耽误用户在网页的其它操作。如：用户名重复验证、聊天室、直播平台、搜索建议、股票走势图

2.1 AJAX原理

2.1.1 AJAX定义

Asynchronous JavaScript and Xml 异步的JavaScript和Xml：用来改善用户体验，其实质是使用js提供的异步对象XMLHttpRequest异步地向服务器发送请求并且接收响应的数据；
服务器返回部分数据而不是完整的页面，以页面无刷新的效果更改页面中的局部内容。
相当于在用户和服务器之间加一个中间层，使用户操作与服务器响应异步化；
把服务器负担的工作转移给客户端，利用客户端闲置的处理能力来处理；
减轻服务器和带宽的负担达到节约空间和带宽租用成本的目的；

2.1.2 AJAX工作原理

2.1.3 获取AJAX对象

获取Ajax对象：获取XMLHttpRequest对象实例

	var xhr = getXhr();
	function getXhr() {
		var xhr = null;
		//通过window.XMLHttpRequest来判断浏览器是否支持标准的创建
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else {
			xhr = new ActiveXObject('Microsoft.XMLHTTP');//IE8.0以下
		}
		return xhr;
	}
	//不考虑IE8.0浏览器以下版本只需要
	var xhr = new XMLHttpRequest();

2.2 AJAX异步对象属性和方法

1. readyState
   readyState用于表示xhr对象的请求状态，一共有5个值，分别是0,1,2,3,4。
   0：请求尚未初始化
   1：已经连接服务器，正在发送请求
   2：接收响应头
   3：接收响应主体
   4：接收响应数据成功

2. status
   status表示服务器的响应状态码
   200：表示服务器正确地处理请求
   202：表示请求被接受但处理未完成
   400：请求错误
   404：资源未找到
   500：内部服务器错误

3. onreadystatechange事件，监听器
   onreadystatechange：绑定一个事件处理函数，用来处理readystatechange事件;
   当Ajax对象的readyState的属性值发生改变就会产生readystatechange事件。
   用于接收响应数据：

   xhr.onreadystatechange=function(){
   	//readystate变化四次，所以该函数被调用四次
   	if (xhr.readystate==4 && xhr.status==200) {
   		//接收响应数据,响应数据自动存储在responseText中
   		var result=xhr.responseText;
   	}  
   }
   

其它属性方法：

3 AJAX的使用

form表单只会提交表单中具有属性name的元素，而异步提交数据是通过元素的id来获取的。

post表单请求完成可以在路由中返回
location.href=‘http://127.0.0.1:3000/02_list.html’；
使用异步AJAX的话在路由中返回0/1，再在监听器里定位到02_list.html

//获取地址栏上的url传过来的参数
//URLSearchParams访问地址栏查询参数的对象
var urlParams=new URLSearchParams(location.search);
var uid=urlParams.get("uid");

3.1 使用AJAX发送get请求

1. 获取Ajax对象：获取XMLHttpRequest对象实例

    var xhr = getXhr();
    function getXhr() {
    	var xhr = null;
    	//通过window.XMLHttpRequest来判断浏览器是否支持标准的创建
    	if (window.XMLHttpRequest) {
    		xhr = new XMLHttpRequest();
    	} else {
    		xhr = new ActiveXObject('Microsoft.XMLHTTP');//IE8.0以下
    	}
    	return xhr;
    }
    //不考虑IE8.0浏览器以下版本只需要
    var xhr = new XMLHttpRequest();
   

2. 绑定监听事件：为Ajax对象的onreadystatechange事件设定响应函数

    xhr.onreadystatechange=function(){
    	//readystate变化四次，所以该函数被调用四次
    	if (xhr.readystate==4 && xhr.status==200) {
    		//接收响应数据,响应数据自动存储在responseText中
    		var result=xhr.responseText;
    		//DOM操作
    	}  
    }
   

3. 创建请求：调用XMLHttpRequest对象的open方法：
   xhr.open(method, url, isAsyn);
   method:请求的方法，“get”/“post”，string类型
   url：请求的地址 string类型
   isAsyn：是否采用异步 false同步 true异步

4. 发送请求：调用Ajax对象的send方法——xhr.send(body)
   body：请求主体form data
   如果有请求主体，post把请求主体放在body的位置；
   get把null放在body处xhr.send(null)，若要提交数据在创建请求时open方法的"URL"后面追加：?..&…

3.2 使用AJAX发送post请求

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
	if (xhr.readyState==4 && xhr.status==200)
		var result=xhr.responseText;
};
xhr.open('post', url, true);
 //请求主体中带有特殊字符&，而post默认文本类型是text/plain普通文本，所以需要修改传输类型;在open与send方法之间实现
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send( 'name=value & name=value' );

POST请求需手动设置请求消息头为application/x-www-form-urlencoded；send方法内传递的是提交参数，没有可为null；
主模块要引入body-parser核心模块给路由使用req.body:

const bodyParser=require('body-parser');
server.use(bodyParser.urlencoded({
	extended: false
}))

3.3 编码问题

编码与解码不同就会产生乱码；
浏览器使用UTF-8/GBK进行编码，服务器默认使用iso-8859-1解码；
通过设置服务器端和客户端的编码来解决乱码：request.setCharacterEncoding(“UTF-8”)，对请求地址使用encodeURI()函数进行处理