JavaScript&nodejs

2026-02-03 10:33:35 +08:00 · 2020-07-21 09:13:01 +08:00
parent 228ea8abb3
commit e41dc12d5e
56 changed files with 2346 additions and 50 deletions
--- a/JavaScript/AJAX/1ajax简介.md
+++ b/JavaScript/AJAX/1ajax简介.md
@@ -0,0 +1,18 @@
+## 1 基础
+
+### 简介
+AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
+
+AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
+
+AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
+
+AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
+
+### 原理 
+异步的JavaScript和XML。创建快速动态网页技术。在后台与服务器进行少量的数据交换，实现网页的异步更新。
+
+
+* 使用JS创建XMLHTTPRequest对象，发送HTTPRequest内容。
+* 使用JS处理被返回的数据，更新页面内容。
+
--- a/JavaScript/AJAX/2ajax应用.md
+++ b/JavaScript/AJAX/2ajax应用.md
@@ -0,0 +1,64 @@
+## 1 实例
+
+```
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<script>
+function loadXMLDoc()
+{
+	var xmlhttp;
+	if (window.XMLHttpRequest)
+	{
+		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
+		xmlhttp=new XMLHttpRequest();
+	}
+	else
+	{
+		// IE6, IE5 浏览器执行代码
+		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
+	}
+	xmlhttp.onreadystatechange=function()
+	{
+		if (xmlhttp.readyState==4 && xmlhttp.status==200)
+		{
+			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
+		}
+	}
+	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
+	xmlhttp.send();
+}
+</script>
+</head>
+<body>
+
+<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
+<button type="button" onclick="loadXMLDoc()">修改内容</button>
+
+</body>
+```
+
+## 2 说明
+
+* 创建xmlhttp=new XMLHTTPRequest()对象。（浏览器的内建对象）
+* xmlhttp.open(method,url,async)打开http请求async=true，异步执行。async=false同步执行，JavaScript会等到服务器返回后才执行。
+* xmlhttp.send(string);发送http请求
+* xmlhttp.responseText;返回字符串形式
+* xmlhttp.responseXML;使用XML解析返回值
+
+## 3 事件响应机制
+
+* onreadystatechange:存储函数，当readyState属性改变时，调用该函数（也是回调函数。）
+* readyState，存储有状态。0：请求初始化，1已经建立连接，2请求已接收，3请求处理中，4请求已完成
+* status：200：OK，404：未找到页面。
+
+```
+xmlhttp.onreadystatechange=function()
+{
+    if (xmlhttp.readyState==4 && xmlhttp.status==200)
+    {
+        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
+    }
+}
+```