ajax & 网络相关

2024-01-18 09:21:58

目录

ajax

AJAX  全称  Async JavaScript and XML(XML是可扩展标记语言)
AJAX 是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容的技术

创建ajax四步

var xhr = new XMLHttpRequest()   // 创建一个核心对象XMLHttpRequest实例
xhr.open('GET','https://cnodejs.org/api/v1/topics') // 与服务器链接  open(请求的类型,文件在服务器上的位置,true（异步）或 false（同步）)
xhr.send({page:1,tab:'ask',limit:10})  // send(将请求发送到服务器。是个string,一般用于post)
xhr.onreadystatechange = function(){ // 每当 readyState 改变时，就会触发 onreadystatechange 事件。
	console.log(xhr.readyState) // readyState存有XMLHttpRequest的状态，0 请求未初始化 1 服务器建立链接 2 请求接受 3 请求处理中 4 请求完成，响应就绪
	console.log(xhr.status)
	if(xhr.readyState == 4 && xhr.status == 200 ){
		console.log(xhr.responseText)  // responseText获得字符串形式的响应数据。
	} 		
}
// 使用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)
    }

网络相关

HTTP

  1. HTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。
  2. HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。
  3. HTTP默认端口号为80，但是你也可以改为8080或者其他端口。
  4. HTTP协议工作于客户端-服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。
  5. HTTP 请求方法
    ajax & 网络相关
  6. HTTP状态码
    ajax & 网络相关
    常见的有
    404 Not Found未找到
    200 OK 请求成功

HTTPS

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

同源 & 跨域

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

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 让每个人都能在互联网上分享资源。

上一篇：ajax封装


下一篇：AJAX 基础