ajax基础

Asynchronous JavaScript And XML, 即异步JS和XML。一种创建交互式网页应用的网页开发技术。

 

 

 

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

 

服务器常用的状态码及其对应的含义如下：

•  200：服务器响应正常。
•  304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
•  400：无法找到请求的资源。
•  401：访问资源的权限不够。
•  403：没有权限访问资源。
•  404：需要访问的资源不存在。
•  405：需要访问的资源被禁止。
•  407：访问的资源需要代理身份验证。
•  414：请求的URL太长。
•  500：服务器内部错误。

 

ajax一般格式

    btn.addEventListener('click', function () {
        //创建对象
        const xhr = new XMLHttpRequest();
        //初始化 设置请求方法
        xhr.open('GET', 'http://127.0.0.1:8000/express?a=1&b=2');   //可以在url后面添加参数给服务端
        //发送
        xhr.send();
        //事件绑定
        xhr.onreadystatechange = function () {
            //判断
            if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
                //处理结果  行 头 空行 体
                text.innerHTML = xhr.response;   //显示响应内容
            } else {

            }
        }
    })

 

1、IE缓存问题

在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。

解决方式：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址即可避免缓存问题

xhr.open("get","/testAJAX?t="+Date.now());

 

2、请求超时 timeout  回调ontimeout

请求异常 error  回调onerror

取消 abort

 

3、对于请求服务器的操作都要考虑节流和防抖的问题

 

4、跨域

　　4.1、同源策略：协议、域名、端口号。违背则跨域

　　4.2、解决方案：

　　　　1、jsonp（jsonp with padding）利用script标签本身具备跨域特性来发送请求，就是在ajax返回里附上script代码，而不是单纯的返回字符串等内容

app.all('/jsonp-server',(request,response)=>{
    // response.send('jsonp');   //返回一个script内容为jsonp这是js识别不了的东西
    response.send("text.innerHTML = 'jsonp'");  //text为主页已经获取的div
});

可以动态创建添加script标签来从服务端获取内容，添加到html内

 

 注意：如果用jquery发jsonp，在getJSON的url结尾要加?callback=？自动添加函数

$.getJSON('http://localhost:8000/server?callback=?',function(){})

服务中要获取该函数

let cb = request.query.callback;   //取jq的函数值

 

　　　　2、CORS（Cross-Origin Resource Sharing）跨域资源共享，只需要在服务端中处理

　　　　　新增了一组http首部字段，允许服务器声明哪些源站通过浏览器有权访问哪些资源

比如:

    response.setHeader('Access-Control-Allow-Origin','*');  //通配
    response.setHeader('Access-Control-Allow-Origin','http://192.....');   //筛选

还有   Access-Control-Expose-Headers等