ajax,json学习笔记（一）ajax,http简介

最新推荐文章于 2024-04-27 23:32:13 发布

小小小西瓜_

最新推荐文章于 2024-04-27 23:32:13 发布

阅读量267

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_20367813/article/details/78508734

js 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Ajax的工作原理及其与HTTP协议的关系。从Ajax的概念出发，逐步深入到其实现细节，包括XMLHttpRequest对象的使用、jQuery简化Ajax的方式，以及HTTP请求和响应的基本构成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要做项目了，想学一下json,然后在慕课网上找到一个教学视频学了一天

地址：http://www.imooc.com/learn/250，Ajax全接触，讲的蛮好的，老师是用PHP做的，我在之前一个SSM的小例子基础上做了下

学的时候做了一点笔记整理一下，参考了很多
先讲一下主要学了那些内容

1、Ajax和http简介
2、原生Ajax:XMLHttpRequest对象
3、JSON
4、jQuery实现ajax

5、跨域

按步骤来吧，先上ajax简介

1、简介

   AJAX:Asynchronous JavaScript and XML
   一种无需重新加载整个网页的情况下更新部分网页的技术
   使用了ajax技术的网页通过在后台跟服务器进行少量的数据交换，网页实现异步局部更新

2、原理

   同步：客户端请求——》服务端处理——》响应——》页面载入
   异步：客户端与服务器不会互相堵塞，例如可以实时检测客户端表单填写正确与否，不必填完才给结果
   通过XMLHttpRequest对象实现了异步,我们使用XMLHttpRequest对象来发送一个Ajax请求

3、实现步骤

   1、html和css实现页面
        2、XMLHttpRequest和web服务器进行数据交换
        3、运用JavaScript操作DOM，实现动态局部刷新

4、jQuery 的ajax更强大了，因为提供了更多内容的封装

$.ajax，$.post， $.get， $.getJSON

参考：

   jQuery.ajax
       http://hemin.cn/jq/jQuery.ajax.html
   HTTP详解(1)-工作原理：
       http://blog.youkuaiyun.com/hguisu/article/details/8680808
   慕课网
       http://www.imooc.com/video/5913
   你真的会使用XMLHttpRequest吗？
       https://segmentfault.com/a/1190000004322487
   Http请求中Content-Type讲解以及在Spring MVC中的应用
       http://blog.youkuaiyun.com/blueheart20/article/details/45174399

Http简介

HTTP
计算机通过网络进行通信的规则

1、无状态的协议，不建立持久的连接

这意味着当一个客户端向服务器端发出请求，然后服务器返回响应(response)，连接就被关闭了
在服务器端不保留连接的有关信息.HTTP遵循请求(Request)/应答(Response)模型

2、http请求步骤

   a、建立TCP链接
   b、Web浏览器向Web服务器放送请求命令
   c、Web浏览器发送请求头信息
   d、Web服务器应答
   e、Web服务器发送应答头信息
   f、Web服务器向浏览器发送数据
   g、Web服务器关闭TCP连接

3、相关概念

   1) HTTP 请求:四部分
       a、HTTP请求的方法或动作：如GET或POST请求
           get:一般用于信息获取，使用URL传递参数，可见，信息数量有限制
           post:一般拥有修改服务器资源，不可见，嵌在请求体中，信息数量无限制
       b、请求的URL：请求的地址
       c、请求头：包含一些客户端环境信息，身份验证信息等
       d、请求体：请求正文，包含客户提交的查询字符串、表单信息等等
       注：请求头和请求体之间有一个空行，表示请求头已经结束
   2）http响应：三部分
       a、数字和文字组成的状态码：显示成功还是失败
           状态码：1XX：信息类，收到请求正在处理
               2XX：成功：如 200 ok
               3XX：重定向
               4XX：客户端错误，客户端请求有错：如 404 NOT Found
               5XX：服务器错误，服务器不能完成该请求处理：如 500
       b、响应头：服务器类型，日期时间，内容类型和长度等等
       c、响应体：响应正文

4、例子

   如用客户端浏览器请求这个页面：http://localhost.com:8080/index.htm
    1）地址解析，
       从中分解出协议名、主机名、端口、对象路径等部分，对于我们的这个地址，解析得到的结果如下：
       协议名：http
       主机名：localhost.com   ：域名系统DNS解析域名localhost.com,得主机的IP地址。
       端口：8080
       对象路径：/index.htm
   2）封装HTTP请求数据包
       以上部分结合本机自己的信息，封装成一个HTTP请求数据包
a   3）封装成TCP包，建立TCP连接（TCP的三次握手）
   4）客户机发送请求命令
b       建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源定位符（URL）、协议版本号
c       后边是MIME信息包括请求修饰符、客户机信息和可内容。
   5）服务器响应
d       服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码

       后边是MIME信息包括服务器信息、实体信息和可能的内容。
e       实体消息是服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束
f       接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据
   6）服务器关闭TCP连接
g       一般情况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接

       如果浏览器或者服务器在其头信息加入了这行代码
           Connection:keep-alive
       TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。