原生ajax

1.ajax

AJAX 全称 Async JavaScript and XML(XML是可扩展标记语言)

AJAX 是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容的技术

创建ajax四步

		//1.创建一个核心对象XMLHttpRequest实例
		let xhr=new XMLHttpRequest();
	 //readyState: 0 请求未初始化 刚刚实例化xmlHttpRequest
        		//:1 客户端与服务器建立链接 调用了open方法
        		//:2 请求已经被接受
        		//:3 请求正在处理中
        		//:4 请求处理完成,响应已就绪 已经拿到了服务器的返回结果

		//2.为xhr.onreadystatechange设置事件监听
        //每当readyState改变时，就会触发onreadystatechange事件
		xhr.onreadystatechange = function (){
        if(xhr.readyState === 4){
        	switch (xhr.status){
        		case 200:{
        			console.log(JSON.parse(xhr.responseText));
                    // responseText获得字符串形式的响应数据。
        			break;
        		}
        		case 404:{
        			console.log("页面或者资源找不到");
        			break;
        		}
        	}
        }
        }

		//3.调用xhr.open(请求方式,请求地址,同步异步)与服务器连接
		xhr.open("GET","https://cnodejs.org/api/v1/topicss",false);
		// method请求方式: GET获取数据 POST发送数据 DELETE删除 PUT修改
		//url请求地址:string
		//async:同步异步 布尔:false=>异步; true=>同步;默认值是false

		//4.将请求发送到服务器
		xhr.send(null)
// 使用abort()方法可以取消异步请求，放在send()方法之前会报错。放在responseText之前会得到一个空值。

封装ajax

function ajax(options = {
        url:"https://cnodejs.org/api/v1/topics", //请求地址
        data:null, //要发送的数据
        method:"GET", //请求方式
        success:function (){}, //成功后的回调
        fail:function() {}, //失败后的回调
        async: false, //同步或者异步
        headers: { //请求头信息
            token: "tokenString"
        }
    }){
        let xhr = new XMLHttpRequest();
        xhr.open(options.method,options.url,options.async);
        for(let headKey in options.headers){
            xhr.setRequestHeader(headKey,options.headers[headKey]);
        }
        xhr.onreadystatechange = function (){
            console.log(xhr.status);//http状态码100 200 300 400 500
            if(xhr.readyState === 4){//已经拿到了服务器相应
                switch (xhr.status){
                    case 200:
                        options.success && options.success(JSON.parse(xhr.responseText))
                        break;
                    default:
                        options.fail && options.fail(xhr.responseText)
                }
            }
        };
        xhr.send(options.data)
    }

2.HTTP状态码

   1xx 请求正在处理

    2xx 一般都表示成功

    3xx 一般都表示重定向

    4xx 一般都表示资源找不到 客户端错误

    5xx 服务器内部错误

常见的有：404 Not Found未找到

                  200 OK请求成功

3.网络相关(同源&跨域)

HTTP

HTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。
HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。
HTTP默认端口号为80，但是你也可以改为8080或者其他端口。
HTTP协议工作于客户端-服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。

HTTP请求：

1.GET:请求指定的页面信息，并返回实体主体。

2.HEAD:类似于GET请求，只不过返回的响应中没有具体的内容，用于获取报头

3.POST向指定资源提交数据进行处理(例如提交表单或者上传文件)。数据被包含在请求中。POST请求可能会导致新的资源的建立和/或已有资源的修改。

4.PUT:从客户端向服务器传送的数据取代指定的文档的内容。

5.DELETE:HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

6.OPTIONS:允许客户端查看服务器的性能。

HTTPS

HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。（说白了就是http加密了）

同源&跨域

同源 协议(https)://  域名(www):  端口号(8080) 都一样 就是同源 如果有一个不一样 就是非同源(跨域)

www

万维网WWW是World Wide Web的简称，也称为Web、3W等。WWW是基于客户机/服务器方式的信息发现技术和超文本技术的综合。

WWW服务器通过超文本标记语言(HTML)把信息组织成为图文并茂的超文本，可以用于描述超媒体。文本、图形、视频、音频等多媒体，称为超媒体(Hypermedia) 超媒体在本质上和超文本是一样的

域名

域名（Domain Name），又称网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识（有时也指地理位置）。

域名段数不同（点号“.”分隔）
一级域名 baidu.cn
二级域名 video.baidu.cn
三级域名 webG.video.buidu.cn
顶级域名和一级域名是一样的，如baidu.com
顶级域名不包含其它级域名。

常用域名后缀：.com国际 / .cn中国 / .gov政府 / .org官方 / .net系统 / .io博客 / .vip …

url分析

http://www.baidu.cn:80/index.html?lx=teacher#video
传输协议://域名:端口号/请求资源的路径和名称?问号传参部分

HTML

HTML 指的是超文本标记语言 ( HyperText Markup Language )
HTML 是用来描述网页的一种语言。
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 不是一种编程语言，而是一种标记语言

XHTML 指的是可扩展超文本标记语言
XML 指可扩展标记语言（eXtensible Markup Language）
XML 是一种很像HTML的标记语言。
XML 的设计宗旨是传输数据，而不是显示数据。

Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

W3C

W3C（英语：World Wide Web Consortium，万维网联盟），又称 W3C 理事会，是万维网的主要国际标准组织。
W3C 让每个人都能在互联网上分享资源。