Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

我就这样悄悄的走啦

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/haodeming/article/details/107573609

版权

如何使用ajax – 完整实现按一个ajax的异步调用和局部刷新，三步：

创建XMLHttpRequest对象，也就是创建一个异步调用对象 – 创建XMLHttpRequest对象
创建一个新的http请求，并执行该http请求的方法，url – 发送ajax请求
设置响应http请求状态变化的函数 – 处理服务器响应
创建XMLHttpRequest对象
这个对象用于在后台和服务器交换数据，是ajax的核心。
并不是w3c的标准，不同的浏览器创建方式不同。
发送ajax请求
创建请求
xmlhttp.open(“GET”,“URL地址”,true);
发送到服务器
xmlhttp.send();
处理服务器响应
1、处理服务器响应
(1) xmlHttp.onreadystatechange()事件用于监听Ajax执行过程
(2) xmlHttp.readystate属性说明的是XMLHttpRequest当前的状态
① Readystate =0 – 请求未初始化
② Readystate =1 – 服务器连接已经建立
③ Readystate =2 – 请求已经被接收
④ Readystate =3 – 请求正在处理
⑤ Readystate =4 – 响应文本已被接收
(3) xmlHttp.status属性服务器响应的状态码，200:成功 404:未找到。。。
利用Ajax实现新闻列表展现
准备后端数据 – 新闻对象
前端编写页面请求
同步和异步的区别
true代表异步执行
false代表同步执行
总结
对于同步执行，相当于代码进入了一个等待状态，数据不返回，程序就不会继续往下执行。
而异步状态下，ajax是不会处于代码的阻塞状态，程序任然会继续往下执行的，但是数据返回通过触发
onreaystatechange事件进行获取和处理的。

转载https://blog.csdn.net/ailunlee/article/details/90600174

HTTP请求的完全过程
1.1 浏览器根据域名解析IP地址
浏览器根据访问的域名找到其IP地址。DNS查找过程如下：

浏览器缓存：首先搜索浏览器自身的DNS缓存（缓存的时间比较短，大概只有1分钟，且只能容纳1000条缓存），看自身的缓存中是否是有域名对应的条目，而且没有过期，如果有且没有过期则解析到此结束。
系统缓存：如果浏览器自身的缓存里面没有找到对应的条目，那么浏览器会搜索操作系统自身的DNS缓存，如果找到且没有过期则停止搜索解析到此结束。
路由器缓存：如果系统缓存也没有找到，则会向路由器发送查询请求。
ISP（互联网服务提供商） DNS缓存：如果在路由缓存也没找到，最后要查的就是ISP缓存DNS的服务器。
1.2 浏览器与WEB服务器建立一个TCP连接
TCP的3次握手。

1.3 浏览器给WEB服务器发送一个HTTP请求
一个HTTP请求报文由请求行（request line）、请求头部（headers）、空行（blank line）和请求数据（request body）4个部分组成。

在这里插入图片描述
1.3.1 请求行

   请求行分为三个部分：请求方法、请求地址URL和HTTP协议版本，它们之间用空格分割。例如，GET /index.html HTTP/1.1。

1.请求方法

   HTTP/1.1 定义的请求方法有8种：GET（完整请求一个资源）、POST（提交表单）、PUT（上传文件）、DELETE（删除）、PATCH、HEAD（仅请求响应首部）、OPTIONS（返回请求的资源所支持的方法）、TRACE（追求一个资源请求中间所经过的代理）。最常的两种GET和POST，如果是RESTful接口的话一般会用到GET、POST、DELETE、PUT。

（1）GET

   当客户端要从服务器中读取文档时，当点击网页上的链接或者通过在浏览器的地址栏输入网址来浏览网页的，使用的都是GET方式。GET方法要求服务器将URL定位的资源放在响应报文的数据部分，会送给客户端。使用GET方法时，请求参数和对应的值附加在URL后面，利用一个问号‘？’代表URL的结尾与请求参数的开始，传递参数长度受限制。例如，/index.jsp?id=100&op=bind。通过GET方式传递的数据直接放在地址中，所以GET方式的请求一般不包含“请求内容”部分，请求数据以地址的形式表现在请求行。地址中‘？’之后的部分就是通过GET发送的请求数据，各个数据之间用‘&’符号隔开。显然这种方式不适合传送私密数据。另外，由于不同的浏览器对地址的字符限制也有所不同，一半最多只能识别1024个字符，所以如果需要传送大量数据的时候，也不适合使用GET方式。如果数据是英文字母/数字，原样发送；如果是空格，转换为+；如果是中文/其他字符，则直接把字符串用BASE64加密，得出：%E4%BD%A0%E5%A5%BD，其中%XX中的XX为该符号以16进制表示的ASCII。

（2）POST

   允许客户端给服务器提供信息较多。POST方法将请求参数封装在HTTP请求数据中，以名称/值的形式出现，可以传输大量数据，这样POST方式对传送的数据大小没有限制，而且也不会显示在URL中。POST方式请求行中不包含数据字符串，这些数据保存在“请求内容”部分，各数据之间也是使用‘&’符号隔开。POST方式大多用于页面的表单中。因为POST也能完成GET的功能，因此多数人在设计表单的时候一律都使用POST方式，其实这是一个误区。GET方式也有自己的特点和优势，我们应该根据不同的情况来选择是使用GET还是使用POST。

在这里插入图片描述
2.URL

   URL：统一资源定位符，是一种资源位置的抽象唯一识别方法。

   组成：<协议>://<主机>:<端口>/<路径>

   端口和路径有事可以省略（HTTP默认端口号是80）

在这里插入图片描述
3.协议版本

   协议版本的格式为：HTTP/主版本号.次版本号，常用的有HTTP/1.0和HTTP/1.1

1.3.2 请求头部

   请求头部为请求报文添加了一些附加信息，由“名/值”对组成，每行一对，名和值之间使用冒号分隔。

   请求头部的最后会有一个空行，表示请求头部结束，接下来为请求数据。

在这里插入图片描述
1.3.3 请求数据

   请求数据不在GET方法中使用，而在POST方法中使用。POST方法适用于需要客户填写表单的场合。与请求数据相关的最长使用的请求头部是Cntent-Type和Content-Length。下面是一个POST方法的请求报文：

POST 　/index.php　HTTP/1.1 　　请求行

Host: localhost

User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2　　请求头

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8

Accept-Language: zh-cn,zh;q=0.5

Accept-Encoding: gzip, deflate

Connection: keep-alive

Referer: http://localhost/

Content-Length：25

Content-Type：application/x-www-form-urlencoded

空行

username=aa&password=1234　　请求数据

1.4 服务器端响应HTTP请求，浏览器得到HTML代码
HTTP响应报文由状态行（status line）、相应头部（headers）、空行（blank line）和响应数据（response body）4个部分组成。
在这里插入图片描述
1.4.1 状态行

   状态行由3部分组成，分别为：协议版本、状态码、状态码扫描。其中协议版本与请求报文一致，状态码描述是对状态码的简单描述。

在这里插入图片描述
1.4.2 响应头部

在这里插入图片描述
1.4.3 响应数据

   用于存放需要返回给客户端的数据信息。

HTTP/1.1 200 OK　　状态行

Date: Sun, 17 Mar 2013 08:12:54 GMT　　响应头部

Server: Apache/2.2.8 (Win32) PHP/5.2.5

X-Powered-By: PHP/5.2.5

Set-Cookie: PHPSESSID=c0huq7pdkmm5gg6osoe3mgjmm3; path=/

Expires: Thu, 19 Nov 1981 08:52:00 GMT

Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0

Pragma: no-cache

Content-Length: 4393

Keep-Alive: timeout=5, max=100

Connection: Keep-Alive

Content-Type: text/html; charset=utf-8

空行

　　响应数据 HTTP响应示例<title>

Hello HTTP!

1.5 浏览器解析HTML代码，并请求HTML代码中的资源
浏览器拿到HTML文件后，开始解析HTML代码，遇到静态资源时，就向服务器端去请求下载。

1.6 关闭TCP连接，浏览器对页面进行渲染呈现给用户
浏览器利用自己内部的工作机制，把请求到的静态资源和HTML代码进行渲染，呈现给用户。

原文链接：https://blog.csdn.net/ailunlee/article/details/90600174

我就这样悄悄的走啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax

如何使用ajax – 完整实现按一个ajax的异步调用和局部刷新，三步：创建XMLHttpRequest对象，也就是创建一个异步调用对象 – 创建XMLHttpRequest对象创建一个新的http请求，并执行该http请求的方法，url – 发送ajax请求设置响应http请求状态变化的函数 – 处理服务器响应创建XMLHttpRequest对象这个对象用于在后台和服务器交换数据，是ajax的核心。并不是w3c的标准，不同的浏览器创建方式不同。发送ajax请求创建请求
复制链接

扫一扫