Ajax 介绍和简单用法

本贴最后更新于 1452 天前,其中的信息可能已经时过境迁

一. Ajax 基础

1. 异步传输 +js+xml

优点:无需刷新整个页面,就能更新局部数据的技术

缺点:打破了浏览器的 back 回退机制

2. 同异步

异步:当一行代码还没结束,就可以执行另一行代码

同步:当一行执行结束,才能执行另一行代码

3. 连接步骤

  1. 创建 XMLHttpRequest 请求对象
  2. 发起 open 请求,需指定 http 的请求方式、请求地址
  3. 向服务器发送数据
  4. 监听服务器的响应和状态码
  5. 判断是否连接成功执行的函数

4. 解决同源跨域问题

同源(三源):协议、域名、端口号

dataType:"jsonp"<script> 的 src 不受同源策略的影响

java:@CrossOrigin

5. readyState 状态码

0, 请求未初始化

1, 服务器已建立链接

2, 请求已接受

3, 请求处理中

4, 请求完成并且响应就绪

6. 两种 http(TCP)发送请求方式:get 和 post 区别

  1. 请求的内容和作用不一样
    get 是请求指定的页面信息,并返回实体主体。
    post 在指定资源提交数据进行处理**(提交表单、上传文件)**,数据是包含在请求体中的。
  2. 请求的参数直接在浏览器 地址栏中显示
    get 会:参数是通过 url 传递
    post 不会:参数是通过 Request body
  3. 发送次数不一样
    get 会产生一个数据包:浏览器会先 http header 和 data 一起发送出去,服务器响应 200(返回数据)
    post 会产生两个数据包(2 次):两次发包的优点,可以保证数据的完整性
    浏览器会先发送 header,服务器响应 100(临时请求) continue,在发送 data,服务器响应 200(返回数据)。
  4. 存储的容量不一样
    get 存储的参数不能超过 2k
    post 没有限制

7. js 和 jq ajax 的码法

  1. js

  2. jquery

    <script>
        $(function () {
            $.ajax({
                // 请求地址
                url: "js/mydata.json",
                // 请求方式
                type: "get",
                // 是否为异步,true为异步,false为同步
                async: "true",
                // 向服务器端传送数据
                data: {},
                // 请求成功返回的函数
                success: function (res) {
                    console.log(res);
                    //jq的遍历方式
                    $.each(res, function (k, v) {
                        console.log(k, v);
                        $(".box").append(" <p>\n" +
                            "        <span>" + k + "</span>\n" +
                            "        <span>" + v + "</span>\n" +
                            "    </p>")
                    })
                },
                // 请求失败返回的函数
                error: function (res) {
                    console.log(res);
                }
            })
        })
    </script>
    
    
  • AJAX
    26 引用 • 96 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1327 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...