• ajax-01

    AJAX

    1. 传统方法请求服务器

      1. 传统的web交互是用户触发一个http请求服务，服务器收到之后做出响应，并且返回一个新的的页面，每当服务器处理客户端提交的请求时，客户端处于空闲等待。并且哪怕只是与服务端进行一个简单的交互或请求一个简单的数据，都要返回一个完整的HTML页面，这造成了大量的带宽浪费，以及应用响应非常慢。

    2. 什么是AJAX

      1. AJAX即“Asynchronous JavaScript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，是网页实现异步更新，意味着可以不重新加载网页而对网页的部分进行更新。
      2. 异步：浏览器在请求数据的过程中，不会一直等待，这段时间还可以做其他的操作。在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
      3. 同步：浏览器在请求数据的的过程中，会一直等待事件的响应，直到返回结果才会执行其他的操作。
      4. 尽管X在AJAX中代表XML，但是由于JSON的许多优势，比如更加轻量以及作为JavaScript的一部分，目前JSON比XML更加普遍。JSON和XML都被用于在ajax模型中打包信息。

    3. ajax作用是什么

      1. 通过AjAx与服务器进行数据交换，AjAx可以使用网页实现布局更新。

        这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

    4. 原生ajax请求有哪些步骤

      1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象

        const xhr = new XMLHttpRequest()

      2. 使用open()方法设置和服务器的交互信息 open()有三个参数：请求类型、url、受否异步(布尔类型)。

        xhr.open(method, url,true)

        请求类型又简单分为两种：get、post。get方式通过将数据放在url地址中传到服务器。post方式通过send()方法传送数据，因此相对安全。

        url为向服务端请求数据的地址，get方法传输时，发送到服务端的数据放在url中以？与前面的地址分隔。而post方法则不用。

        第三个参数为Boolean类型，决定请求方式是否为异步，true为异步方式。

      3. 设置发送的数据，开始和服务端交互

        xhr.send(data)

      4. 注册事件

        xhr.onload = function() {
cb(JSON.parse(xhr.responseText))
}

    5. 封装ajax请求

      //method：请求类型
//url：请求地址
//data：传输到服务端的数据
//callback：回调函数
function ajax(method, url, data, callback) {
    var ajax = new XMLHttpRequest(); //创建ajax对象
    if (method.toLowerCase() === 'get') { //get方法
        if (data) { //判断数据是否为空
            url += '?' + data; //将数据加到url后面
        }
        ajax.open(method, url, true); //设置请求信息
        ajax.send(); //发送数据
    } else if (method.toLowerCase() === 'post') { //post方法
        ajax.open(method, url, true);
        ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); //设置post方法设置请求头
        ajax.send(data);
    }
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4) { //判断ajax状态
            if (ajax.status === 200) { //判断服务器状态
                callback && callback(ajax.responseText); //将数据放入回调函数
            } else {
                throw new Error('请求失败，错误码为：' + ajax.status); //请求失败则抛出错误
            }
        }
    }
}

    6. ajax几种请求方式

      1. GET，POST，PUT，DELETE

      2. get方式请求

        var ajax = new XMLHttpRequest();
ajax.open('get','./data/data.json?username=张三&&age=18',true);//get方式数据通过url发送到服务端
ajax.send();
ajax.onreadystatechange = function(){
    if(ajax.readyState === 4){
    	if(ajax.status === 200){
    		console.log(ajax.responseText);
		}
	}
}

      3. post方式请求

        var ajax = new XMLHttpRequest();
ajax.open('post','./data/data.json',true);
ajax.setRequestHeader('content-type','application/x-www-form-urlencoded');//post方式需要设置请求头(第二个参数是form表单enctype属性的一个值)
ajax.send('username=张三&&age=18');//post方式数据通过send()方法发送到服务端
ajax.onreadystatechange = function(){
    if(ajax.readyState === 4){
        if(ajax.status === 200){
			console.log(ajax.responseText);
        }
    }
}

    7. ajax状态码

      1. readyState属性可以获取ajax的状态，由0-4表示，分别表示如下：
      2. 0：（初始化）还没调用open方法
      3. 1：（载入）已调用send()方法，正在发送请求
      4. 2：（载入完成）send()方法完成，已收到全部响应内容
      5. 3：（解析）正在解析响应内容
      6. 4：（完成）响应内容解析完成，可以在客户端调用了

    8. 数据解析

      1. JSON的常规用途是同web服务器进行数据传输，在从web服务器接收数据时，数据永远是字符串形式，需要转成数组或对象形式来使用，一般用JSON.parse()方法。

        JSON.parse()方法将一个JSON字符串转换为对象，对于衍生自数组的JSON使用JSON.prase()，则会返回JavaScript数组，而不是对象。

    9. 原生ajax请求数据实例

      <script src="./js/ajax.js"></script> //调用前面封装好的ajax
var ul = document.getElementsByTagName('ul')[0];//获取ul
ajax('post','./data/data.json','',addLi);//ajax请求json中的数据
function addLi(data){
    var d = JSON.parse(data);//json数据转成数组形式，原json数据为衍生数组的json，可以直接用JSON.parse()转成数组类型
    d.forEach(function(item){
        ul.innerHTML += `<li>${item.username}</li>`;//将数据在页面中渲染
    })
}

    10. http状态码

      1. status属性可以获取服务器返回的网络状态码，一共5个系列：
        • 1xx系列：消息，指定客户端响应的某些动作这一类状态码代表请求已被接受，需要继续处理，这类响应是临时响应，只包含状态行和某些可选的响应头信息，以空行结束。由于HTTP/1.0协议中没有定义任何1xx状态码，所以除非在某些实验条件下，服务器禁止向此类客户端发送响应。
        • 2xx系列：成功，代表请求已经成功被服务器接收、理解并接受。常见的有200、201。
        • 3xx系列：重定向，代表需要客户端采取进一步的操作才能完成请求，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的location中指明。
        • 4xx系列：请求错误，代表客户端看起来可能发生了错误，妨碍了服务器处理。如401、404。
        • 5xx系列：服务器错误，代表服务器在处理请求的过程中有错误或异常状态发生，也有可能是服务器意识到当前的软硬件资源无法完成对请求的处理。

    11. http常见状态码有哪些

      1. 200 OK 服务器成功处理请求
      2. 301/302 Moved Permanently（重定向）请求的URL已移走。响应报文中应该包含一个Location URL，说明资源现在所处的位置
      3. 304 Not Modified（未修改） 客户的缓存资源是最新的，要客户端使用缓存内容
      4. 404 Not Found 未找到资源
      5. 501 Internal Server Error 服务器遇到错误，使其无法对请求提供服务

    12. GET和POST

      1. get post
        1语义上的区别 get用于获取数据 post用于提交数据
        5传输能力:HTTP对URL的长度没有限制
        但浏览器和服务器会对其做出限制        		 GET请求传输数据会受到限制 POST请求在这方面会小些
        参数的数据类型 GET只接受ASCII字符
        GET请求只能进行url编码        		 POST没有限制
        而POST支持多种编码方式
        2页面刷新 get多少次都不改变页面呈现的数据 页面提示表单重新提交
        3安全 参数直接暴露在URL上 POST比GET安全，因为数据在地址栏上不可见,
        参数不会被保存在浏览器历史或 web 服务器日志中，而是存放在请求数据包的消息体中
        4参数传输 GET请求的参数写在URL中 POST请求写在请求的body里
      2. 分类 GET POST
        后退按钮/刷新 无害 数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
        书签 可收藏为书签 不可收藏为书签
        缓存 能被缓存 不能缓存
        编码类型 application/x-www-form-urlencoded application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
        历史 参数保留在浏览器历史中。 参数不会保存在浏览器历史中。
        对数据长度的限制 是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。 无限制。
        对数据类型的限制 只允许 ASCII 字符。 没有限制。也允许二进制数据。
        安全性 与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！ POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
        可见性 数据在 URL 中对所有人都是可见的。 数据不会显示在 URL 中。

      3. GET在浏览器回退时是无害的，而POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）。。

      4. GET产生的URL地址可以被Bookmark，而POST不可以。

      5. GET请求会被浏览器主动cache，而POST不会，除非手动设置。

      6. GET请求只能进行url编码，而POST支持多种编码方式。

      7. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

      8. GET请求在URL中传送的参数是有长度限制的，而POST么有。

      9. 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

      10. GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

      11. GET参数通过URL传递，POST放在Request body中。

    13. 使用ajax解决浏览器缓存问题

      1. 在一些项目中，一般提交请求都会通过ajax来提交，测试时发现，每次提交后得到的数据都是一样的，经过调试，发现问题发现在前端，没有清理缓存，所以得到的还是原来的旧数据。而我们都知道ajax能提高页面载入的速度主要的原因是通过ajax减少了重复数据的载入，也就是说在载入数据的同时将数据缓存到内存中，一旦数据被加载其中，只要我们没有刷新页面，这些数据就会一直被缓存在内存中，当我们提交 的URL与历史的URL一致时，就不需要提交给服务器，也就是不需要从服务器上面去获取数据，虽然这样降低了服务器的负载提高了用户的体验，但是我们不能获取最新的数据。为了保证我们读取的信息都是最新的，我们就需要禁止他的缓存功能
      2. 禁止浏览器缓存功能有如下几种方法：
        1. 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
        2. 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
        3. 在URL后面加上一个随机数："fresh=" + Math.random();。
        4. 在URL后面加上时间搓："nowtime=" + new Date().getTime();。
        5. 如果是使用jQuery，直接这样就可以了$.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录

    14. axios特点

    15. webSocket 如何兼容低版本浏览器？

      Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR
  • 相关阅读:
    自己重写HTMLEditorExtender控件
    Sys.InvalidOperationException: A control is already associated with the element 错误处理方法
    navigationbar tabbar 状态栏的 高度
    iOS之正则表达式(转载)
    Mesonry的使用方法
    SimulatorXcode模拟器如何使用PC键盘进行输入
    Masonry第三方代码约束
    卸载openfire
    安装和使用cocoapods
    js选择颜色小游戏（随机生成不含重复数字的数组，通过数组中的数控制定义好的数组）
  • 原文地址：https://www.cnblogs.com/ycyc123/p/14806467.html
Copyright © 2020-2023  润新知