ajax
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title></title> ???</head> ???<body> ???????<input type="button" value="点击发送请求" id="send"> ???????<div id="content"></div> ???</body> ???<script> ???????// ajax=>>>> XMLHttpRequest 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象 ???????/* 大概分为四步 ????????????1:创建对象 ???????????2:连接 ???????????3:发送请求 ???????????4:接收 ???????*/ ???????let dom = document.getElementById(‘send‘); ???????let contentDom = document.getElementById(‘content‘); ???????dom.onclick = () => { ???????????// 1：创建对象 ???????????let xhr; ???????????if (window.XMLHttpRequest) { ???????????????xhr = new XMLHttpRequest(); ???????????} else { ???????????????xhr = new ActiveXObject("Microsoft.XMLHTTP"); ???????????} ???????????//:2：连接 ???????????/* ?????????????open(method,url,async) ????????????XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true ????????????不推荐使用 async=false，但是对于一些小型的请求，也是可以的。 ????????????JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。 ????????????当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可 ????????????*/ ???????????xhr.open(‘get‘, ‘./data/note.txt‘, true) ???????????//:3：发送请求 ???????????/* ?????????????send() 方法中可以发送数据 ????????????*/ ???????????xhr.send(); ???????????// 4:接收 ???????????/* ?????????????每当 readyState 改变时，就会触发 onreadystatechange 事件 ????????????readyState 从 0 到 4 发生变化 ???????????????0: 请求未初始化 ???????????????1: 服务器连接已建立 ???????????????2: 请求已接收 ???????????????3: 请求处理中 ???????????????4: 请求已完成，且响应已就绪 ???????????------------------------------------------------- ???????????status ???????????????200: "OK" ???????????????404: 未找到页面 ???????????如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 ???????????responseText ?获得字符串形式的响应数据。 ???????????responseXML ?????获得 XML 形式的响应数据。 ????????????*/ ???????????xhr.onreadystatechange = () => { ???????????????if (xhr.readyState == 4 && xhr.status == 200) { ???????????????????console.log(xhr.responseText) ???????????????????content.innerHTML = xhr.responseText; ???????????????} ???????????} ???????} ???</script></html>
ajax2.0
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title></title> ???</head> ???<body> ???????<input type="button" value="点击发送请求" id="button"> ???</body> ???<script> ???????/* ????????ajax 1.0缺陷 ???????1.只支持文本数据的传送，无法用来读取和上传二进制文件。 ???????2.传送和接收数据时，没有进度信息，只能提示有没有完成。 ???????3.受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据 */ ???????let buttonDom=document.getElementById(‘button‘); ???????buttonDom.onclick=()=>{ ???????????let xhr=new XMLHttpRequest(); ???????????xhr.open(‘post‘,‘./add‘,true); ???????????xhr.send(); ???????????xhr.onreadystatechange=()=>{ ???????????????if(xhr.readyState==4&&xhr.status==200){ ???????????????????console.log(xhr.responseText) ???????????????} ???????????} ???????} ???????????</script></html>node 服务器
const http=require(‘http‘);const fs=require(‘fs‘);const url=require(‘url‘);http.createServer((req,res)=>{ ???// req.headers.origin ?ajax2.0 新增 可以判断来源 ?这样就可以限制访问 ???if(req.headers.origin==‘http://localhost:8888‘){ ???????res.setHeader(‘Access-Control-Allow-Origin‘,‘*‘);// 此方法ajax1.0即有 ???} ???let {pathname,query}=url.parse(req.url,true); ???// 区分html页面与接口 ???if(pathname==‘/add‘){ ???????res.write(JSON.stringify(‘接口请求完成‘)); ???????res.end(); ???}else{ ???????fs.readFile(`./${pathname}`,(err,data)=>{ ???????????if(err){ ???????????????console.log(err) ???????????????res.writeHeader(404); ???????????????res.end(); ???????????????return ; ???????????} ???????????res.write(data); ???????????res.end(); ???????}) ???}}).listen(8888);console.log(‘服务器运行在localhost8888端口‘)ajax1.0_2.0
原文地址：https://www.cnblogs.com/xqzi/p/10472915.html