Ajax-526互联

Ajax特点

协议：tcp,udp,ftp,file,websocket,http

http:不支持服务端主动给客户端发送消息

udp和websocket能主动给客户端推送消息

1、Ajax 的优点：

1) 可以无需刷新页面而与服务器端进行交互

2) 允许根据用户事件来更新部分页面内容

2、Ajax 的缺点

1)没有历史记录

2)存在跨域问题 (同源策略，如从 a.com 发送请求到 b.com中)

3) SEO 不友好 (搜索引擎的优化不友好)

1、 http 请求-分为四部分：

1 http 请求方法？动作 ( GET/POST )

2 正在请求的 URL

3 请求头，包含客户端环境信息，身份验证等

4 请求体，也是请求正文包含客户提交的查询字符串信息，表单信息等

2、 Http 响应-分为三部分：

① 一个数字和文字组成的状态码，用来显示请求的状态 (成功/失败)

② 响应头 (服务器类型、日期时间等等)

③ 响应体，也就是响应正文

3、 http 状态码

1、 100~199 表示连接继续

2、200~299 表示各种意义上的成功

3、 300~399 表示重定向

4、400~499 表示客户端错误

5、 500~599 表示服务端错误

js创建Ajax代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // js的Ajax
        // 1.创建XMLHttpRequest对象
        var xml = new XMLHttpRequest();
        // 2.连接（请求方法，请求地址：url，是否异步，默认异步（true））
        xml.open("get","text.txt");
        // 3.发送请求
        xml.send();
        // 4.成功
        xml.onreadystatechange = function() {
            // 0.没初始化，没调用open
            // 1.初始化了，没调用send
            // 2.初始化了，调用send
            // 3.数据还在传输中
            // 4.成功
            if(xml.readyState === 4 && xml.status === 200) {
                console.log("成功!!!")
            }
        }
    </script>
</body>
</html>

jQuery创建Ajax代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../jquery-1.8.3.min.js"></script>

    <script>
        $.ajax({
            // 请求地址
            url:"http://172.16.104.160:8080/selectShop",
            // 请求方法
            type:"get",
            // 请求参数
            data:{
                "shopName":"薯片",
                "number":"10",
                "money":"10",
                "userChoose":"12",
            },
            // 请求成功执行的方法
            success:function(mes) {
                console.log(mes)
            },
            error:function() {
                console.log("失败")
            }
        })
    </script>
</body>
</html>