2021-10-13ajax前期知识

最新推荐文章于 2024-10-11 17:48:26 发布

美食大战老鼠

最新推荐文章于 2024-10-11 17:48:26 发布

阅读量71

点赞数

文章标签： http ajax tcp/ip

本文链接：https://blog.csdn.net/Liu189364/article/details/120741634

版权

本文详细介绍了HTTP请求的过程，包括建立连接、发送请求、接收响应和断开连接，并解析了请求和响应的组成部分。同时，讲解了HTTP状态码的分类及其含义。接着，深入探讨了AJAX的概念，阐述了其异步数据交换的核心和基本步骤，以及文件上传的实现。最后，对比了GET和POST请求的区别，并展示了jQuery中$.ajax()的多层次用法。

摘要由CSDN通过智能技术生成

http请求过程：

（1）、建立TCP网络连接

（2）、客户端：发送请求头，请求体

（3）、服务器返回响应头，响应体

（4）、断开TCP网络连接

（5）、浏览器渲染响应体

请求组成：

（1）、请求行

（2）、请求头

（3）、空行

（4）、响应体

响应组成：

（1）、状态行

（2）、响应头

（3）、空行

（4）、响应体

常见的状态码：

（1）、1xx:连接准备

（2）、2xx成功 200成功 201添加成功

（3）、3xx重定向 307临时 303

（4）、4xx客户端错误 404找不到 402没有权限 403禁止访问

（5）、5xx服务端错误 505 500服务器错误

什么是ajax？简述。

ajax 是 async javascript and xml 异步的javascript和xml
核心用xmlHttpRequest 对象与服务器交换数据
使用js+css渲染页面

ajax基本步骤：

（1）、创建 var xhr = new XMLHttpRequest()
（2）、打开 xhr.open("GET",url);
（3）、发送 xhr.send();
（4）、监听 xhr.onreadystatechange = function(){
if(xhr.readyState===4&&xhr.status===200){
// xhr.responseText
}
}

文件上传步骤：

（1）获取文件：

var file=document.getElementById(xxx).files[第几个]；

var form=new FormData();

form.append("file",file);

（2）ajax步骤：

var xhr=new XMLHttpRequest();
           xhr.open("POST","需要上传的服务器网址");
           xhr.send(form);
           xhr.onreadystatechange=function(){
               if(xhr.readyState===4&&xhr.status===200){
                   var res=JSON.parse(xhr.responseText);
                   var img=document.createElement("img");
                   img.src="上传的服务器网址"+res.pic;
                   document.body.append(img);
               }
           }