0722 NOTE
AJAX
Asynchronous JavaScript + XML的简写
能够向服务器请求额外的数据而无需加载刷新页面，会带来更好的用户体验
从SSR渲染（服务端渲染）走向CSR渲染（客户端渲染）
SEO（Search Engine Optimization）优化：搜索引擎优化
1.open
open方法参数：
- DOMString method 数据传输方式（GET/POST/PUT/DELETE…）
- DOMString url 连接服务器，也可以写成文件路径，实现加载本地文件
- optional boolean async 异步同步参数（true为异步，false为同步）
- optional DOMString user 用户名
- optional DOMString password 密码
2.send
发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.
send方法发送数据类型：
-
ArrayBuffer data
类型化数组，建立在ArrayBuffer对象的基础上。作用：分配一段可以存放数据的连续内存区域。
-
Blob data 二进制大对象
-
Document data 文档数据
-
DOMString data 文本数据
-
FormData data 表单数据对象
3.头消息和超时
头消息：
请求头 requestHeader 前端发送，服务端接收 //设置请求头必须在open之后send之前
响应头 responseHeader 服务端发送，前端接收
4.AJAX状态事件
xhr.addEventListener("readystatechange", loadHandler);
//接收到readystatechange事件状态变化 经历四个阶段,五个节点
//timeout 超时事件
//loadstart 开始加载事件
//progress 进度事件（触发指示一个操作正在进行中）
//abort 加载中止事件
//error 加载失败事件
//load 加载完成事件
//loadend 加载进度停止事件
状态主要分
1、信息 100-101
2、成功 200-206
3、重定向 300-307
4、客户端错误 400-417
5、服务器错误 500-505
服务器错误显示在日志中
5.jsonp
注意：jsonp速度比ajax快，不属于通信，属于文件加载
跨域的解决方法：
1.cors跨域 修改服务端响应头
2.jsonp跨域 通过script加载不限地址的规则加载文本转换script代码执行，实现跨域
3.websocket跨域
//open
var xhr = new XMLHttpRequest();
xhr.addEventListener("load",loadHandler)
xhr.open("GET","./data/a.json"); //数据驱动显示，可以通过修改配置文件实现修改操作dom
// xhr.open("GET","./data/a.xml");
xhr.send();
function loadHandler(e){
var obj = JSON.parse(xhr.response);
var div = document.querySelector("div");
// div.style.backgroundColor = obj.backgroundColor;
// div.style.color = obj.color;
div.textContent = obj.a;
Object.assign(div.style,{
width:"100px",
height:"100px",
color : obj.color,
backgroundColor : obj.backgroundColor
})
// var xml=xhr.responseXML;
// var item=xml.getElementById("1002")
// console.log(item.getAttribute("price")); //获取的xml文件可以按照DOM操作方式处理
// var url = xhr.responseURL; //获取加载路径
// console.log(url);
}
//send
// var arr = new Uint8Array([1,2,255,256]); //生成视图数组
//发送给服务器的数是16进制，因此打印<Buffer 01 02 03 04>，两位代表了八位,不能超过255，超过255则超过了8位
//服务器接收数据转回数组后打印结果：[1,2,255,0]
// var arr = new Uint16Array([1000,2000,3000,4000]);
// var str = new Uint8Array("i love javascript".split("").map(item=>item.charCodeAt(0)^45)); //^45是为了加密
// var str = new Uint16Array("凯哥很膨胀".split("").map(item=>item.charCodeAt(0)^666)); //发送中文时，超过255位
//将数据转化成二进制流发出，必定为数字，可以直接发送数字，也可以转成Unicode编码格式字符串发送
// var xhr = new XMLHttpRequest();
// xhr.addEventListener("load",loadHandler)
// xhr.open("POST","http://localhost:8080"); //数据驱动显示，可以通过修改配置文件实现修改操作dom
// // xhr.send(JSON.stringify(arr));
// xhr.send(str);
// function loadHandler(e){
// }
// var xhr = new XMLHttpRequest();
// xhr.addEventListener("load", loadHandler)
// xhr.open("GET", "./img/18-.jpg");
// // xhr.send(JSON.stringify(arr));
// xhr.send();
// function loadHandler(e) {
// console.log(xhr.response);
// var xhr1 = new XMLHttpRequest();
// xhr1.addEventListener("load", loadHandler)
// xhr1.open("POST", "http://localhost:8080");
// // xhr.send(JSON.stringify(arr));
// xhr1.send(xhr.response);
// function loadHandler(e) {
// }
// }
// FormData 数据发送
var form=document.querySelector("form");
form.addEventListener("submit",submitHandler)
// formData 是一个迭代器，因此可以使用for of遍历
function submitHandler(e){
e.preventDefault();
var fd=new FormData(form);
// for(var [key,item] of fd){
// console.log(key,item);
// }
// fd.append("ab","3");//追加
// fd.set("user","xietian12");//修改
var xhr=new XMLHttpRequest();
xhr.addEventListener("load",loadHandler);
xhr.open("POST","http://localhost:8080");
xhr.send(fd);
}
function loadHandler(e){
}
//头消息和超时
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", loadHandler);
xhr.open("POST", "http://localhost:8080");
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头,内容类型设置
//通过POST发送给PHP时需要设置这个请求头
// xhr.setRequestHeader("Content-Type","text/json");//发送其他时需要请求头允许跨域
// xhr.timeout=500; //设置超时时间，超时时间为500ms，超过500ms自动超时
// xhr.addEventListener("timeout",timeHandler); //超时事件监听
xhr.send();
function loadHandler(e) {
console.log(xhr.getAllResponseHeaders());//获取所有的响应头 //content-type: text/html;charset=utf-8
console.log(xhr.getResponseHeader("Content-Type"));//获取对应的响应头数据 text/html;charset=utf-8
}
// function timeHandler(e){
// console.log(e);
// // xhr.abort();//断开网络
// }
//状态事件
var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", loadHandler);
xhr.open("POST", "http://localhost:8080");
xhr.send();
function loadHandler(e) {
// console.log(xhr.status,xhr.readyState); //打印xhr状态码和xhr状态节点
}
//promise封装ajax
function ajax(url, { method = "GET", body = null } = { method: "GET", body: null }) {
return new Promise(function (resolve, reject) {
if (typeof body !== "string" && body != null) return reject(); //未考虑body传入二进制数据流的情况
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.send(body);
xhr.onreadystatechange = function (e) {
if (xhr.readyState < 4) return;
if (xhr.status >= 400 && xhr.status < 500) reject()
else resolve(xhr.response);
}
xhr.onerror = function (e) {
reject();
}
})
}
init();
async function init(){
var data=await ajax("http://localhost:4001",{method:"POST",body:JSON.stringify({a:1,b:2})});
console.log(data);
}
<script>
//jsonp
// cors跨域
// jsonp跨域
// function fn(a){
// console.log(a);
// }
// jsonp跨域，利用script加载不限地址的情况加载文本转换script代码执行
var script=document.createElement("script");
script.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=谢天&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";
document.body.appendChild(script);
function callback(o){
console.log(o);
}
</script>
<!-- <script src="http://localhost:4001"></script> -->
//server.js
var http = require("http");
const { values, parseInt } = require("lodash");
var querystring = require("querystring");
http.createServer((req, res) => {
// console.log(req.headers); //获取请求头
var data = "";
req.on("data", function (_data) {
// data += _data; //获取的二进制数据流转化为字符串
// var a = JSON.parse(_data); //16进制视图数组转回十进制数组（传数据时先将数组转化为JSON字符串）
// var arr = [];
// for(var prop in a){
// arr[prop] = a[prop];
// }
// console.log(arr);
// var arr = Array.from(_data);
// console.log(arr);
// var str = "";
// for(let i = 0; i < _data.length;i++){
// str += String.fromCharCode(_data[i]^45);
// }
// console.log(str);
// var str = ""
// for (var i = 0; i < _data.length; i += 2) {
// var s = _data[i + 1].toString(16).padStart(2, "0") + _data[i].toString(16).padStart(2, "0");
// str += String.fromCharCode(parseInt(s, 16) ^ 666);
// }
// console.log(str);
// var arr = []; //16进制视图数组转回十进制数组
// _data.reduce((value,item)=>{
// let str = "";
// str += item.toString(16);
// if(str.length < 2) str = 0 + str;
// arr.push(str);
// },"");
// for(let i =0;i < arr.length ;i += 2){
// arr[i] = arr[i+1] + arr[i];
// arr.splice(i+1,1);
// i--;
// }
// arr.forEach((item,index)=>{
// arr[index] = parseInt(arr[index],16);
// })
// console.log(arr);
})
req.on("end", function () {
var requery = querystring.parse(decodeURIComponent(req.url.split("?")[1])); //url中获取数据
// console.log(req.method);
if (req.method.toUpperCase() === "POST") {
try {
// console.log("aaa");
data = JSON.parse(data); //用此方法解析querystring字符串会抛出异常，随后走错误处理语句
} catch (e) {
data = querystring.parse(data);
}
}
res.writeHead("200", {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers":"*",
"Content-Type": "text/html;charset=utf-8"
})
res.end(JSON.stringify("你瞅啥！")) //返回消息
// res.end(query.callback+"(123)") //jsonp
})
}).listen(8080)
JQuery选择器
优点：兼容能力强（1.12版本之前），向下迭代兼容
主要功能：
1.像CSS那样访问和操作DOM
2.修改CSS控制页面外观
3.简化JavaScript代码操作
4.事件处理更加容易
5.各种动画效果使用方便
6.让Ajax技术更加完美
7.基于jQuery大量插件
8.自行扩展功能插件
// $("<div></div>")
// .appendTo("body")
// .width(50)
// .height(50)
// .css("backgroundColor", "red")
// .click(function () {
// $(this).css("backgroundColor", "blue");
// })
// var str="abcdef";
// str=str.split("").reverse().join("");
// var obj={ //连缀实际使用方法解析
// a:1,
// b:function(){
// return this;
// },
// c:function(){
// return this;
// },
// d:function(){
// return this;
// }
// }
// obj.b().c().d();
// console.log($("div"));
// $ 是函数 jQuery函数
// jQuery()-->$()
// console.log(jQuery==$);
// console.log($("div"));
// jQuery对象不能使用DOM的方法
// $("div").innerHTML=``
// $("div").addEventListener("click",function(){
// })
// $("div").οnclick=function(){
// }
// $("div").html("<span></span>");
// $("div").on("click",clickHandler);
// $("div").click(function(){
// })
// jQuery--->DOM
// var div=$("div").get(0);//获取列表中的第0个元素
// console.log(div);
// var div=$("div")[0];
// console.log(div);
// var arr=Array.from($("div"));
// console.log(arr);
// DOM--->jQuery
// var divs=document.querySelectorAll("div");
// divs=$(divs);
// console.log(divs);
// var div=document.createElement("div");
// div=$(div);
// console.log(div);
// $("div");
// $("#div");
// $(".div1");
// $(".div1.div2"); //class名中同时包含div1和div2的元素
// $("div.div2"); //div列表中class名为div2的元素
// $("div .div2"); //div后代元素div2
// $("div").find(".div2")
// $("div>.div2"); //子代
// $("div").children(".div2");
// console.log($("div").children().length);
// $("div+span");//下一个兄弟选择器
// $("div").next("span")
// $("div~span");//所有兄弟选择器
// $("div").nextAll("span");
// $("div").nextUntil(".span1"); //向下寻找直至class名为span1为止（不包含span1）
// $(".div3").nextUntil(".span1");
// $(".div3").prev();
// $(".div3").prevAll();
// $(".div3").prevUntil(".div2");
// $("div>");
// $('div+');
// $(".div1,.div2");
// $("div[ab]");//有ab属性
// $("[ab=3]");//有ab属性，并且属性值是3
// $("[ab!=3]");//ab属性不等于3
// console.log( $("[ab|=a]")); 属性值是a或者以a起头后面紧跟-的
// console.log($("[class~=div3]"));//属性值是唯一的div3，或者前后有空格区分的
// $("[div^=a]");//属性值以a起头的
// $("[ab$=a]");//属性值以a结尾
// $("[ab*=a]");//属性值中包含a字符