day27Ajax

AJAX
关键名词

同步(排队买东西 阻塞)

异步(我们去吃饭 多个同时进行了(互相之间没有关系)(不知道什么开始 也不知道时候结束))

进程(单独进行的程序叫做进程)

线程(进程里面的最小计量单位 下载电影的时候就是一个线程)

ajax概述

ajax是一种异步通讯技术(异步的js和异步的`xml),利用网络请求 请求对应的数据工具(http,https).

 

 ajax入门

核心对象XMLHttRequest

//构建请求对象
var request = new XMLHttpRequest()
//打开请求地址 指定请求方式
request.open('GET','http://jsonplaceholder.typicode.com/todos')
//发送请求
request.send()
//事件监听 请求请求状态的改变
request.onreadystatechange = function(){
//获取请求状态 判断是否到达
if(request.readyState == 4){
// console.log(request.responseText)
var jsonStr = request.responseText
var jsonObj = JSON.parse(jsonStr)
console.log(jsonObj);
}
}

GET请求

get请求参数传递 使用?做拼接&连接多个参数 他请求的内容在地址栏显示(大小2kb)

特点:

请求的参数使用?和&做拼接

对应的请求的时候数据会暴露在地址栏(不安全)

大小差不多2kb

get请求会有缓存(相对而言速度比较快 数据加载全部使用get)

get请求的速度快(默认情况下是请求)

POST请求

post常用表单数据提交 封装为一个表单对象存入请求体

特点

post请求对应的需求指定为post请求

请求的参数填充在请求体中传递(不会暴露在地址栏 相对安全)

post请求的数据容量较大2m左右

post没有缓存(相对速度较慢)

实力

接口(post请求) http://10.41.12.7:8080/user

//构建请求对象
var request = new XMLHttpRequest()
//打开请求地址 指定请求方式
request.open('post','http://jsonplaceholder.typicode.com/todos')
//发送请求
request.send("name=jack&pwd=12345")
//设置请求头 Content-type表示的意思你提交的数据是什么类型 以表单方式提交
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//事件监听 请求请求状态的改变
request.onreadystatechange = function(){
//获取请求状态 判断是否到达
if(request.readyState == 4){
// console.log(request.responseText)
var jsonStr = request.responseText
var jsonObj = JSON.parse(jsonStr)
console.log(jsonObj);
}
}

昨日二阶段加强训练:

31.事件冒泡

事件冒泡可以形象地比喻为把一块石头投入水中，泡泡会一直从水底冒出水面，也就是说从下向上开始传播。

今日面试题:

如何进行前端性能优化:

html如何进行渲染