Ajax基础知识

Ajax的应用场景:

1、页面上拉加载更多数据

2、列表数据无刷新分页

3、表单项离开焦点数据验证

4、搜素框提示文字下拉列表

Ajax运行原理：

服务器端响应的数据格式：在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输（这是规定）

浏览器端还需要把服务器端响应的json字符串转换为json对象

/*  在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输（这是规定）客户端还需要把服务器端响应的json字符串转换为json对象 */var responseText = JSON.parse(xhr.responseText)

请求报文：在Http请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规则和定好的格式

请求参数的格式

1、application/x-www-form-urlencoded

name=zhangsan&age=20&sex=男

2、application/json

{name:'zhangsan',age:'20',sex:'男'}

在请求头中指定Content-Type属性的值是application/json，告诉服务器当前请求参数的格式是json

JSON.stringify() //将json对象转换为json字符串

注意：get请求是不能提交json对象数据格式的，传统网站的表单也是不支持json对象数据格式的

请求类型：分为get请求和post请求

Get请求：参数在URL后面，多个参数用&进行连接

Post请求：参数在请求体中

Ajax状态码：

xhr.readyState // 获取Ajax状态码

0：请求未初始化（还没有调用open（））

1：请求已经建立，但是还没有发送（还没有调用send（））

2：请求已经发送

3：请求正在处理中，通常响应中已经有部分数据可以用了

4：响应已经完成，可以获取并使用服务器的响应了

http常见的状态码：

xhr.status // 获取http常见的状态码

200：表示响应成功

404：没有找到请求的资源

500：服务器端错误

同源政策

同源：协议，域名，端口这三者条件必须相同

为什么会有同源政策？

——为了保证用户信息的安全，防止恶意的网站窃取数据。

同源政策是浏览器给予Ajax技术的限制，服务器端是不存在同源政策限制。

Ajax请求限制：Ajax只能向自己的服务器发送请求。

解决跨域问题

Ajax是为了访问自己服务器的数据，跨域是为了访问别人服务器的数据

1、CORS 跨域资源共享/非同源资源共享，它允许浏览器向跨域服务器发送Ajax请求，克服了Ajax只能同源使用的限制

2、使用JSONP解决同源限制问题，它不属于Ajax请求，但是它可以模拟Ajax请求

jsonp的原理与实现

（1）首先是利用script标签的src属性来实现跨域。

<body><script>// 2、定义函数function fun(data) {console.log('客户端的fun函数被调用')console.log(data)}</script><!-- 1、将非同源服务器端的请求地址写在script标签的src里面 --><!-- 把函数名传递给服务器 --><script src="http://localhost:3001/test?callback=fun"></script>
</body>

（2）通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。

app.get('/test', (req, res) => {const name = req.query.callbackconst result = name + '({name:"zhangsan"})'res.send(result)
})

（3）由于使用script标签的src属性，因此只支持get方法

3、服务器进行跨域，浏览器吧请求发送给自己的服务器，之后自己的服务器去访问其他的服务器数据，再返回给浏览器，绕过了浏览器的同源策略

// 客户端访问自己服务器 s1<script src="./js/ajax.js"></script><script>// 获取按钮元素var btn = document.getElementById('btn')btn.onclick = function() {ajax({url: 'http://localhost:3000/server',type: 'get',success: function(result) {console.log(result)}})}</script

// s1 服务器访问s2服务器
// 对应s1中 06html文件
app.get('/server', (req, res) => {// 访问s2的服务器，需要借助第三方模块 requestrequest('http://localhost:3001/cors', (err, response, body) => {res.send(body)})
})

JSONP与CORS区别

实际上，cors和jsonp都是用于解决跨域问题，当两个页面的协议、域名、端口号中有一个不一致时就存在了跨域，一旦出现跨域，浏览器发送跨域请求后，请求回来的数据都会被浏览器所拦截。

JSONP的原理是动态创建script标签

1.JSONP发送的不是ajax请求

2.JSONP不支持post请求

3.JSONP没有兼容问题

CORS中文意思是跨域资源共享，需要在服务器端设置cops配置

1.CORS发送的是真正的ajax请求

2.CORS既支持get 又支持post

3.有兼容问题,只有ie10及以上才支持

withCredentials

withCredentials:指定在涉及到跨域请求时，是否携带cookie信息，默认值为false。

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。

// 在服务器中添加这样一句话
// 允许客户端发送跨域请求时携带cookie信息res.header('Access-Control-Allow-Credentials', true)

//下拉框改变事件
province.onchange = function() {}//用户输入事件user.oninput=function(){}

防抖与节流知识点

防抖：指在事件触发n秒后再执行回调，如果在n秒内再次被触发，则重新计算时间。比如说，我点击屏幕，八秒后出现结果，但是我在八秒内又点击屏幕，之后又要等八秒才有结果，我一直点就会一直重新等八秒，直到我最后一次点，等八秒就有结果。

主要应用场景有：

a、scroll事件滚动触发，

b、搜索框输入查询

c、表单验证

d、按钮提交事件

e、浏览器窗口缩放，resize事件

节流：如果持续触发某个事件，则每隔n秒执行一次。比如，我点击屏幕，八秒显示结果，我点第一次，点第二次，点第三次……，等八秒出现点击第一次的结果，之后又出现第二次的结果，……有点点像卡顿的那种，你每次的点击，都会等八秒才给你响应。

主要应用场景：

a、DOM元素的拖拽功能实现

b、射击游戏类

c、计算鼠标移动的距离

d、监听scroll事件

key.trim() //内容去空格

FormData对象的作用

1．模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。

// 客户端
<script>// 获取提交按钮var btn = document.getElementById('btn')// 获取表单var form = document.getElementById('form')btn.onclick = function() {// 将普通表单转化为FormData表单// formData只能使用post请求发送 var formData = new FormData(form)// 使用ajax发送数据// 1、创建ajaxvar xhr = new XMLHttpRequest();// 2、发送请求发送和地址xhr.open('post', "http://localhost:3000/formData")// 3、发送xhr.send(formData)// 4、监听xhr对象事件xhr.onload = function() {if (xhr.status == 200) {console.log(xhr.responseText);}}}</script>

// 服务端
app.post('/formData', (req, res) => {// 创建一个formdata表单解析对象const from = new formidable.IncomingForm();// 解析客户端传过来的formData对象from.parse(req, (err, fields, files) => {res.send(fields)})
})

2．异步上传二进制文件

// 客户端
<body><div class="container"><div class="from-group"><label> 请选择文件</label><input type="file" id="file"><!-- 显示图片 --><div class="padding" id="imgBox"></div><!-- 进度条 --><div class="progress"><div class="progress-bar" style="width:0%" id="bar">0%</div></div></div></div><script>// 获取文件内容var file = document.getElementById('file');// 为文件选择控制添加 onchange 事件// 在用户选择文件时触发file.onchange = function() {// 创建一个formData表单对象var formData = new FormData();// 获取进度条元素var bar = document.getElementById('bar')// 获取图片容器var imgBox = document.getElementById('imgBox')// 把获取的文件追加到formData对象中区// 第二个参数是文件files，但我们就选择一个文件，所以是this.files[0],不管选了多少个文件，files都是一个集合，要注意写法formData.append('attrName', this.files[0])// 创建ajax对象var xhr = new XMLHttpRequest()// 对ajax对象进行配置xhr.open('post', 'http://localhost:3000/upload')// 文件上传过程中持续触发xhr.upload.onprogress = function(ev) {// ev.loaded 文件已经上传了多少// ev.total 上传文件的总大小var results = (ev.loaded / ev.total) * 100 + '%';// 把进度结果发到进度条内容中bar.style.width = results;bar.innerHTML = results;}// 发送ajax对象xhr.send(formData);// 监听服务器端响应给客户端的数据xhr.onload = function() {if (xhr.status == 200) {// 将服务器端返回的JSON字符串转换为JSON对象var result = JSON.parse(xhr.responseText)// 动态创建img标签var img = document.createElement('img')// 给图片标签设置src属性img.src = result.path;// 当图片加载完成以后img.onload = function() {// 将图片显示在页面中imgBox.appendChild(img)}}}}</script>
</body>

// 服务端
app.post('/upload', (req, res) => {// 创建一个formdata表单解析对象,设置保留文件后缀名const form = new formidable.IncomingForm({ keepExtensions: true });// 设置客户端上传文件的存储路径form.uploadDir = path.join(__dirname, 'public', 'uploads');// 解析客户端传过来的formData对象form.parse(req, (err, fields, files) => {// 服务器要把图片地址返回给客户端res.send({path: files.attrName.filepath.split('public')[1]})})
})

FormData对象只能使用post请求方式

FormData对象的属性

// 获取表单对象的值
formData.get('key');//key是name属性的值// 设置表单对象中属性的值
// 如果设置的表单属性不存在，则会创建这个表单属性，如果存在则会覆盖
formData.set('key','value');// 删除表单对象中属性的值
formData.delete('key');// 向表单对象中追加属性值
formData.append('key','value')
// 例如：创建空的表单对象
var f = new FormData();
f.append('sex','男');
console.log(f.get('sex'));

注意: set方法与append 方法的区别是，在属性名已存在的情况下，set会覆盖已有键名的值，append会保留两个值。

Jquery中 $.ajax()

作用：发送Ajax请求

 <script src="./js/jquery.min.js"></script><script>// 使用jquery$('#btn').on('click', function() {// 使用jQuery中的ajax$.ajax({//请求方式type: 'post',// 请求地址 // 如果访问自己的服务器，可以省去协议，域名，端口url: '/user',data: {name: 'lisi',age: '18',},// 在请求发送之前调用beforeSend: function() {alert('请求不会被发送')// 请求不会被发送return false},// 指定参数的格式类型 contentType: 'application/json',// 请求成功以后函数被调用success: function(response) {// response为服务器端返回的数据// 方法内部会自动将json字符串转换为json对象console.log(response)},// 请求失败以后函数被调用error: function(xhr) {console.log(xhr)}})})</script>

serialize方法

作用：将表单中的数据自动拼接成字符串的参数

<script type="text/javascript">// 提交事件$('#form').on('submit', function() {// 将表单内容拼接成字符串类型的参数var param = $('#form').serialize()console.log(param)return false})</script>

$.ajax方法发送jsonp请求

// 客户端
<script src="./js/jquery.min.js"></script><script>$('#btn').on('click', function() {$.ajax({url: '/jsonp',// 指定当前发送jsonp请求dataType: 'jsonp',// 修改callback参数名称// jsonp: 'cb',// 指定函数名称 ,如果你不想要success这个函数，你可以通过这个自己创一个函数，要提前先定义好函数// jsonpCallback: 'fnName',success: function(response) {console.log(response)}})})</script>// 服务端
app.get('/jsonp', (req, res) => {res.jsonp({name: 'xuxi',age: 18,})
})

$.get() 和 $.post()

作用：$.get() 方法用于发送get方法; $.post() 方法用于发送post方法

// 客户端
<script>$('#btn').on('click', function() {// $.get('/base', {//     name: 'zhangsan',//     age: '18'// }, function(response) {//     console.log(response)// })$.post('/base', function(response) {console.log(response)})})</script>// 服务器端
app.get('/base', (req, res) => {res.send(req.query)
})
app.post('/base', (req, res) => {res.send({ name: 'xuxi' })
})

jquery中Ajax全局事件 ajaxStart，ajaxComplete

只要页面中有ajax请求被发送，对应的全局事件就会被触发

// 当页面中有ajax请求发送时触发
$(document).on('ajaxStart',function(){console.log('start');
})// 当页面中有ajax请求完成时触发
$(document).on('ajaxComplete',function(){console.log('complete');
}))

NProgress 插件，使用逼真的涓流动画来告诉用户正在发生的事情。

// 1.引入插件的css文件// 2.引入插件的js文件// 3.开始调用
// 当页面中有ajax请求发送时触发
$(document).on('ajaxStart',function(){NProgress.start()
})// 当页面中有ajax请求完成时触发
$(document).on('ajaxComplete',function(){NProgress.done()
}))

**邮箱验证规则** ：/^[A-Za-z\d]+([-_ .][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/