ajax
一. http 超文本传输协议
二 .在浏览器地址栏键入URL，按下回车之后会经历以下流程：(面试题)
0. 先看本地c盘 hosts里是否配置指定域名(ip)
1.浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
2.解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
3.浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，
该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
4.服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;
5.释放 TCP连接;
6.浏览器将该 html 文本并显示内容;
三. 请求报文
1.请求行 [请求方式 url地址 协议(1.0/1.1/2.0) ]
2.请求头部 [content-type,cookie]
3.请求体 [数据]
四. 响应文本
状态行 协议 状态码(200,404,304,401) 状态短语
响应头 content-type: 告诉浏览器 给你的内容 怎么去处理
响应体 给浏览器的数据
进程与线程
进程 程序启动的时候 就运行 每个进程都有 独立的代码和数据空间 (资源最小的分配单位)
线程 负责处理任务 调用最小单位
进程 一个人
线程 手 (工作) js引擎是属于单线程
同步 : 按照顺序一步一步的执行
异步 : 不按照顺序执行
ajax 的核心对象是什么? (重点)
XMLHTTPREQUEST 简称 xhr
什么是ajax?
它是一个基于http协议的,与服务器进行通信的技术. 能够实现同步或异步的局部刷新效果
局部刷新?有什么好处?
能够提高用户体验 (能实现 局部刷新)
降低浏览器与服务器的压力(减低吞吐量);
//1.创建核心对象
function createXHR() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest()
}
return new ActiveXObject("Msxml2.XMLHTTP");//ie ms(微软)
}
//2.写一个get请求
function ajax(url) {
//1.得到ajax 的核心对象
var xhr = createXHR();
//2.准备请求的参数 open(请求方式,地址,同步或异步)
//同步会造成 阻塞 (假死,卡死)
xhr.open("get", url, false) //如果第3个参数,不写默认就是异步 ,false同步
//3.发送请求
xhr.send(null);//注意:get请求发送null
//4.得到数据
if (xhr.status == 200) { //判断服务器是否ok
//得到数据
return xhr.response
}
}
//js单线程
var res = ajax("http://useker.cn/getUsers");
console.log(JSON.parse(res));
ajax简单封装
class Utils {
static createXHR() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest()
}
return new ActiveXObject('Msxml2.XMLHTTP');//IE6
}
static get(url) {
let xhr = Utils.createXHR();
xhr.open("get", url, false);//同步
xhr.send(null);//因为是get请求发送空
if (xhr.status == 200) {
return xhr.response;
}
}
}
什么是回调函数?
把一个函数当做另外一个函数的参数,在另外一个函数里被执行和传递参数
能做什么?能解决异步.
异步
function createXHR() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest()
}
return new ActiveXObject('Msxml2.XMLHTTP');//IE6
}
function ajax(url, callback) {
var xhr = createXHR();
//准备参数
xhr.open("get", url);//不写第3个参数也是异步,true也是异步,false同步
xhr.send(null);//因为是get请求所以send发送null
//注意:异步需要同步事件帮我们处理 事件的机制
//这个事件,自动触发 (xhr读取数据时,就触发)会触发3次,状态 2 3 4
xhr.onreadystatechange = function () {
if (xhr.status == 200) {//http的状态码
// 事件触发的状态,默认的值是0
if (xhr.readyState == 4) { //完全接受了数据
// xhr.response;
callback(xhr.response)
}
}
}
}
//调用ajax
ajax("http://useker.cn/person", function (res) {
console.log(res);
});
get 请求是通过url带参数
key value
{name:abc123}
http://www.baidu.com?wd=abc&&name=abc123&pwd=123
ajax全套
class Utils {
//处理参数,把对象拼接成为参数
static getParams(o) {
let str = "";
for (let key in o) {
if (o.hasOwnProperty(key)) {
str += key + "=" + o[key] + "&";
}
}
return str;
}
static createXHR() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest()
}
return new ActiveXObject('Msxml2.XMLHTTP');//IE6
}
//url 请求的路径
//data 携带的数据
//callback 异步的回调函数
static get(url, data, callback) {
let xhr = this.createXHR();
xhr.open("get", url + "?" + Utils.getParams(data));
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.status == 200 && xhr.readyState == 4) {
if (callback) {
callback(xhr.response);
}
}
}
}
}
分页 面向过程
<script>
var pageSize = 20;
var pageIndex = 1
var dataCount = 0;
var oTab = document.querySelector("#tab");
//页面加载就要显示数据
//http://useker.cn/getUsersPage?pageSize=5&pageIndex=2
Utils.get("http://useker.cn/getUsersPage", {
pageSize,//一页显示5要
pageIndex //当前是第几页
}, function (res) {
console.log(res);
let { data, count } = JSON.parse(res);
dataCount = count;//把得到的总条数赋给 全局变量 dataCount
var strHtml = ``
data.forEach(item => {
strHtml += `
<tr>
<td>${item.uname}</td>
<td>${item.upwd}</td>
<td>${item.uage}</td>
<td>${item.uphone}</td>
<td>${item.realname}</td>
<td>${moment(item.datetime).format("YYYY-MM-DD HH:mm:SS")}</td>
</tr> `
});
document.querySelector("#tab").innerHTML = strHtml;
})
var oBtnNext = document.querySelector("#next");
oBtnNext.onclick = function () {
// 11 5
var maxPage = Math.ceil(dataCount / pageSize)
// 236 每一页显示20条
pageIndex++;//下一页
if (pageIndex >= maxPage) {
pageIndex = maxPage;
alert("已经是最后一页")
}
Utils.get("http://useker.cn/getUsersPage",
{
pageSize,//一页显示5要
pageIndex //当前是第几页
}, function (res) {
console.log(res);
let { data } = JSON.parse(res);
var strHtml = ``
data.forEach(item => {
strHtml += `
<tr>
<td>${item.uname}</td>
<td>${item.upwd}</td>
<td>${item.uage}</td>
<td>${item.uphone}</td>
<td>${item.realname}</td>
<td>${moment(item.datetime).format("YYYY-MM-DD HH:mm:SS")}</td>
</tr> `
});
document.querySelector("#tab").innerHTML = strHtml;
})
}
//上一页
var oPrev = document.querySelector("#prev");
oPrev.onclick = function () {
pageIndex--;
if (pageIndex <=0) {
pageIndex = 1;
alert('以是第一页')
}
Utils.get("http://useker.cn/getUsersPage",
{
pageSize,//一页显示5要
pageIndex //当前是第几页
}, function (res) {
console.log(res);
let { data } = JSON.parse(res);
var strHtml = ``
data.forEach(item => {
strHtml += `
<tr>
<td>${item.uname}</td>
<td>${item.upwd}</td>
<td>${item.uage}</td>
<td>${item.uphone}</td>
<td>${item.realname}</td>
<td>${moment(item.datetime).format("YYYY-MM-DD HH:mm:SS")}</td>
</tr> `
});
document.querySelector("#tab").innerHTML = strHtml;
})
}
</script>
分列 类方法
<script>
class TabPage {
constructor(settings = {}) {
this.settings = Object.assign({ pageSize: 5, pageIndex: 1 }, settings);
this.pageSize = this.settings.pageSize;//默认1页显示5条
this.pageIndex = this.settings.pageIndex;//默认第1页
this.el = document.querySelector(this.settings.el);
this.data = [];//数据
this.maxPageIndex = 0;
//实例化后,就立马请求ajax
Utils.get("http://useker.cn/getUsers", {}, (res) => {
let { data } = JSON.parse(res) // {msg:'xxx',data:[xxx],count:236}
this.data = data;
//计算出最大页码 一共有多少页
this.maxPageIndex = Math.ceil(this.data.length / this.pageSize);
//渲染数据
var newArr = this.data.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
this.render(newArr);
})
}
//下一页
next() {
this.pageIndex++;
if (this.pageIndex >= this.maxPageIndex) {
this.pageIndex = this.maxPageIndex;
}
console.log( this.maxPageIndex);
// 0 ,5
// 5 ,10
var newArr = this.data.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
this.render(newArr);
}
//上一页
prev() {
this.pageIndex--;
if (this.pageIndex <= 0) {
this.pageIndex = 1;
}
if (this.pageIndex >= this.maxPageIndex) {
this.pageIndex = this.maxPageIndex;
}
// 0 ,5
// 5 ,10
var newArr = this.data.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
this.render(newArr);
}
//渲染
render(list) {
if (!Array.isArray(list)) {//list必须是一个数组
return;
}
let strHtml = ``;
list.forEach(item => {
strHtml += `
<tr>
<td>${item.uname}</td>
<td>${item.upwd}</td>
<td>${item.uage}</td>
<td>${item.uphone}</td>
<td>${item.realname}</td>
<td>${moment(item.datetime).format("YYYY-MM-DD HH:mm:SS")}</td>
</tr>
`;
});
this.el.innerHTML = strHtml;
}
}
var oTabPage = new TabPage({
el: "#tab",
pageSize:50
})
var oNext = document.querySelector("#next");
oNext.onclick = function () {
oTabPage.next()
}
var oPrev = document.querySelector("#prev");
oPrev.onclick = function () {
oTabPage.prev()
}
</script>
