ajax1.0_2.0
Posted 善良的小邱子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax1.0_2.0相关的知识，希望对你有一定的参考价值。
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的主要内容，如果未能解决你的问题，请参考以下文章
用于模糊的 OpenGL ES 2.0 片段着色器速度慢且质量低