Ajax学习笔记

最新推荐文章于 2024-09-13 10:46:15 发布

吡吡怪

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量182

点赞数 1

文章标签： ajax 前端

本文链接：https://blog.csdn.net/qq_38176216/article/details/125693719

版权

1.http协议的特点

在学习Ajax之前，我们应该首先了解客户端请求和响应的标准协议“hettp协议（hypertex transport protocol）”，协议详细规定了浏览器和万维网服务器之间互相通信的规则

在这里插入图片描述

http请求

请求行：

  请求方式、请求路径、请求协议版本
  格式：Method Request-URI HTTP-Version CRLF
  其中method表示请求方法，Request-URI表示统一资源标识符
  Http协议总共定义了十种方法：GET、POST、PUT、HEAD等等
  如果请求行中是GET方法，则没有请求体（例如用户在浏览器的地址栏中输入的URL，回车发出的都是GET请求）

请求头

    请求头是以key: valued 的形式展现（格式很重要！！！）
    http中常见的请求头：
    Content-Type：数据类型   ；
    Content-Length：Body的长度；
    Host：客户端告知服务器，所请求的资源是在那个主机的那个端口上；
    User-Agent：声明用户的操作系统和浏览器版本信息
    referer：当前页面是从那个页面跳转来的
    location：搭配3XXX状态码使用，告诉客户端接下来要去哪里访问；
    Cookie：用于在客户端存储少量信息，通常用于实现会话（session）的功能
    Origin：发起一个针对跨域资源共享的请求（该请求要求服务器在响应中加入一个Access-Control-Allow-Origin的消息头，表示访问控制所允许的来源）

空行

    标志着请求头的结束，也标志着请求体的开始  \r\n

请求体

     GET参数没有请求体，因为GET方法的请求参数都已经跟在了URL（地址栏）后面。
     如果请求体存在，则在请求头中会有一个Content-Length属性来标识Body的长度

http响应

状态行

     状态行包括：协议版本，状态码，【状态码说明】
     格式： HTTP-Ver Status-Code Reason-Phrase CRLF
     例如： HTTP/1.1 200 OK 
     其中Status-Code的第一个数字代表响应类别，后续两位描述在该类响应下发生的具体状况
     常见的状态码概述：
                         1XX 接受的请求正在处理 、
                         2XX 请求正常处理完毕、
                         3XX 需要进行附加操作以完成请求 
                         4XX 服务器无法处理请求 
                         5XX 服务器处理请求出错 
        404:找不到         403：forbiding        401：未授权         500：内部错误

响应头

     格式：Content-Type：text/html;charset=utf-8
            Content-length:2048
            Content-encoding:gzip

空行

响应体

       <html>    
           <head>
           </head>
           <body>
                <h1>啦啦啦</h1>
           </body>
       </html>

2.Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

在这里插入图片描述
代码实例:

前端代码：
         const xhr=new XMLHttpRequest();
         //设置响应数据自动转换
         xhr.responseType='json';
        //初始化 设置请求方法和url
        xhr.open('GET','http://127.0.0.1:8000/server2');
        //设置请求头（预定义）
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
       //发送
        xhr.send();
        //存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
        xhr.onreadystatechange=function(){
            //readystate是xhr对象中的属性，表示状态 0 1 2 3 4
            
            if(xhr.readyState===4){
                if(xhr.status>=200&&xhr.status<=300){
                   //手动对数据转化
                     let data=JSON.parse(xhr.response);
                     console.log(data);
                     result.innerHTML=data.name; 
                }
            }
        }
    //如果你的网站中存在多个Ajax任务时，也可以使用回调函数的方式来调用
//     function myFunction()
// {
//     loadXMLDoc("/try/ajax/ajax_info.txt",function()
//     {
//         if (xmlhttp.readyState==4 && xmlhttp.status==200)
//         {
//             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
//         }
//     });
// }


后端代码：
 //相应的服务器代码
    const app=express();
    app.get('/server1',(request,response)=>{
        //设置响应头  设置允许跨域
        reponse.setHeader('Access-Control-Allow-origin','*');
        //设置所有头信息都可以接受
        response.setHeader('Access-Control-Allow-Headers','*');
        response.send('hello world');
    });
    //可以接受任意类型的请求
    app.all('/server2',(request,response)=>{
    const data={
         name:'atlalala'
}
       //对对象进行字符串转换
          let str=JSON.stringify(data);
          reponse.send('HELLO AJAX POST');//只能发送字符串或buffer类型
    });
    

    app.listen(8000,()=>{
         console.log();
    });


注：post请求与get请求参数设置的区别，get请求直接将参数设置在url中由服务器来进行解析，而post请求将参数设置在
send（）请求体中传输过去由服务器来解析

2.1.1 nodemon工具

Nodemon is a utility depended on by over 1.5 million projects, that will monitor for any changes in your source and automatically restart your server. Perfect for development.

Swap nodemon instead of node to run your code, and now your process will automatically restart when your code changes. To install, get Node.js, then from your terminal run:

安装指令（在node环境下）

npm install -g nodemon

2.1.2 IE缓存问题

加一个时间戳让url设置成不一样的，这样就不会走缓存了，就会重新请求数据

xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());

2.1.3 网络请求超时与网络异常

前端：
//超时设置，超时后取消请求
xhr.timeout=2000;
//超时回调
xhr.ontimeout=function(){
     alert("网络异常，请稍后重试！！");
}
//网络异常回调
xhr.onerror=function(){
    alert("你的网络似乎出了一点问题！！")
}