学习笔记---ajax基础知识和核心原理

ajax基础知识

1.什么是ajax:

Async Javascript And XML ====> 异步的JS和XML; 
XML:可扩展的标记语言(自定义的一些标签,包裹数据,服务器传递数据);

<?xml version="1.0" encoding="UTF-8" ?>

<root>

<student>

<name>王二小</name>

<age>33</age>

<sex>男</sex>

</student>

</root>

2.Ajax异步的概念:

局部刷新:数据传递的是json字符串,前后端分离 
1).向服务器发送ajax请求; 
2).将服务器返回的数据经过前端的解析处理,绑定到页面上; 
3).页面只需要改变一部分,整个页面不需要重新的渲染; 
全局刷新:页面的整体刷新,当页面上数据发生改变时,向后台发送请求,后台会将页面的数据重新渲染一遍,将渲染好的页面返回给客户端呈现,这是全局刷新,也是前后端不分离。这就要求后台去套数据,一般会使用jsp来套数据;

前后端分离和不分离的优势和劣势

不分离的优势:

1.页面上的数据都是服务器渲染好的,源代码上能看到数据,有利于SEO优化(SEO:搜索引擎的收录和抓取); 
2.从服务器上获取的页面已经是渲染好的,不需要客户端在去额外的请求,所以页面加载速度比较快(前提是服务器够快),一般京东淘宝这样的页面首屏一般都是前后端不分离,直接渲染好页面给前端返回;

不分离的劣势:

1.如果页面有很多内容需要改变,需要实时获取数据,每次更新数据都要重新刷新一下页面,客户体验不好; 
2.每次都是服务器渲染的话,对服务器的要求比较高,服务器的压力比较大,如果服务器处理不过来,就会导致加载变慢甚至服务器崩溃;所以京东淘宝等网站只有首屏才会采用服务器渲染以提高页面加载速度; 
3.目前市场上前后端分离的项目占大部分;

分离的优势

1.可以根据需求任意改变页面的某一部分的数据更新,而不用刷新整个页面(例如:实时刷新,表单提交,用户登录),用户体验好; 
2.有利于开发,提高开发效率,开发的时候前后端互不影响,不需要考虑各自使用的技术,相当于实现了技术的分离;可以进行同时开发,项目开始的时候,只需要制定以下交互文档(API文档),规定请求的url,请求方式,参数,返回数据格式等等,前端也可以使用node模拟接口和数据,来验证和调试页面;

分离的弊端

1.不利于SEO优化(注意:后期使用JS将数据绑定到页面上,不会在源代码上体现,所以不会被SEO收录和抓取); 
2.刚开始加载时,请求资源文件的时候如果请求次数过多,会影响页面的加载速度;为了防止加载速度过慢,可以进行优化处理;

基于原生实现ajax

示例:

// 创建ajax对象:

let xhr = new XMLHttprequest();

// 定义请求方式,同步或者异步,请求路径等等:

xhr.open("method", "URL", async, user.name, user.password);

// 定义返回状态:

xhr.onreadystatechange = () => {

if (xhr.readyState === 4 && xhr.status === 200) {

// 获取响应的文本内容;

let res = xhr.responseText;

}

}

// 开始发送请求(请求主体的内容数据):

xhr.send(null);

分析open的参数:

1.method: ajax的请求方式: 
1).GET系列方式(获取数据):

• get: 从服务器获取数据;
• delete: 从服务器上删除某些文件;
• head: 获取响应头信息;(不要响应主体,只要响应头);
• ……

2).POST系列方式((推送数据):

• post: 向服务器传递数据;
• put: 向服务器添加指定的资源文件;
• …… 
  不管是哪一种方式,都可以向服务器发送数据,也可以获取数据,但是一般GET系列以获取为主,POST系列就是以发送数据为主; 
1).想获取动态展示的数据(如:新闻列表),一般使用GET请求,因为只需要告诉服务器需要什么,服务器就返回需要的内容; 
2).当页面上有大量信息需要发送给服务器(如:表单提交),服务器接收到数据只需要返回成功或失败的状态,此时合适POST请求;

第一个参数:GET和POST具体有哪些区别

区别1:数据携带方式: GET向服务器发送请求时,发送的内容比POST少,获取的比POST多;

• 1.GET请求的参数是拼接在url上的,通过url的参数形式来传递数据,但是url的大小是有限制的,只有几KB,一旦超过限制,就会被默认剪切掉,所以无法携带大量的数据;
• 2.POST发送的数据是通过请求主体实现的,理论上大小是没有限制的,但是真实项目中为了保证传输数据的速度,也会加一些限制(例如:上传资料/图片等等文件时,后台服务器做一下特殊处理);

区别2:缓存问题: GET请求容易走缓存,POST不会:

• GET通过url传参数的方式请求数据,当遇到实时获取数据的时候,以为url是一样的,参数也是一样的,此时浏览器就会默认读取缓存中的内容返回给页面,导致获取不到服务器最新的数据,一般都是在参数后面加一个时间戳或者随机数来防止浏览器读取缓存;
• POST请求不会走缓存,因为请求的数据在请求主体中,是不会走缓存的;

区别3:安全性: GET请求法师没有POST请求方式安全:

• GET的参数在url上,一些简单的黑客技术,拦截url(url劫持),也可以把客户端传递的信息获取到,导致信息泄露;
• POST的信息都在请求主体中,相对比较安全;

第二个参数:URL

这个url地址就是后台给的地址,一般都会有一个API文档,参照文档写就成;

第三个参数: Async

• async: true 不写就是默认true,===>异步;
• async:false ===> 同步;

最后两个参数:用户名,密码

一般不需要写,只有一些服务器不允许匿名访问,只有开通权限的才可以访问,比如一些重要机密的,银行等这样的服务器才会设置权限;

第三部分解析

xhr.onreadystatechange = function () {};

ajax请求中xhr.readyState的状态码:

• 0: 创建一个ajax对象,默认状态是0;
• 1: 执行xhr.open是1;
• 2: 请求已发送,并接受到了响应头是2;
• 3: 响应主体在路上是3;
• 4:响应主体返回客户端是4;

ajax请求中xhr.status的HTTP网络状态码:

• 200:成功状态,一个完整的HTTP事物完成,以2开头的都是成功状态;
• 300:以3开头的状态码也是成功状态,只不过是服务器做了一些处理;
• 301:永久重定向(永久转移),一般都是域名的迁移;比如京东的www.360buy.com重定向到www.jd.com;
• 302:临时重定向(临时转移),在新版的HTTP中307也代表临时重定向,一般是在处理服务器的负载均衡,当一个服务器负荷太大,将内容临时迁移到另一个服务器上处理,主要是一些图片,有一些大公司一般都有专门处理图片的服务器;
• 304:从浏览器中读取缓存,把一些不经常更新的文件和图片缓存,减少服务器的压力,增加页面的加载速度;

以4开头的都是失败的,一般都是客户端的错误;

• 400:请求参数错误;
• 401:无权限访问;
• 404:访问的地址不存在;

以5开头的一般都是服务器的错误;

• 500:服务器未知错误;
• 503:服务器超负载;

ajax常用的属性和方法有哪些

let xhr = new XMLHttpRequest();

console.dir(xhr);

[属性]

• readyState:存储的是ajax的状态码;
• responseText/responseXML:返回的是响应主体的内容,只是格式不一样,使用不同的属性接收即可; 
  • responseText 一般都是json字符串;
  • responseXML是XML格式的数据字符串;
• status:记录服务器返回的HTTP状态码;
• statusText:对返回状态码status的描述;
• timeout:设置ajax请求的超时时间;超过设置的时间响应主体还没回来,浏览器就会把请求强制断开;

[方法]

• abort():强制中断ajax请求;
• getAllResponseHeaders();获取全部响应头的信息(获取的是一堆字符串文本);
• getResponseHeader(“属性名”);获取指定的响应头;如:getResponseHeader(“date”);获取响应头中存储的服务器的时间;
• open(); 略
• overrideMimeType();重写MIME类型;
• send(); 略
• setRequestHeader(“属性名”,属性值);设置请求头;注意:必须写在open()之后,send()之前,内容不可以是中文,否则会报错; 
  [事件]
• onabort();当ajax中断的时候触发的事件;
• onreadystatechange();当ajax状态发生变化就会触发的事件;
• ontimeout();当ajax超时触发的事件;