ajax及请求方式get、post的区别

js语言特性

• js在发明之初，它的目的是做一些网页上面的小效果（小广告），最初使用的时候觉得有点鸡肋
• 被设计成单线程，一次只能做一件使用

• 只要前面的代码执行完毕了 ，后面的代码才能执行
• 特别消耗浏览器性能，假如前面一行代码执行了10s，后面的代码需要等待10s后才执行

• 为了解决单线程的问题，所以js里面提出了异步编程思想
• 异步可以和同步代码并存，而且彼此之间没有多大影响
• 异步程序代码执行时不会阻塞其他程序代码执行，从而提升整体执行效率。
• 同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务
• 异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。
• 编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。

创建ajax

• xml指的是前后端使用的数据格式，功能和json是一样的
• http上网的协议，超文本传输协议，发送请求的时候绕不过http协议
• request表示请求
• 注意点：
  • ajax不一个新的技术，而是几个技术的结合体

 <button>发送请求</button>
    <script>
        let btn = document.querySelector('button')
        btn.onclick = function(){
            /*
            创建ajax
            + xml指的是前后端使用的数据格式，功能和json是一样的
            + http上网的协议，超文本传输协议，发送请求的时候绕不过http协议
            + request表示请求
            + 注意点：
              => ajax不一个新的技术，而是几个技术的结合体
            */
            let xhr = new XMLHttpRequest()
            // console.log(xhr.readyState)
            /*
                填写请求信息
                + 参数1表示请求方式
                => get
                => post
                + 参数2表示请求地址
                => 后端地址
                => api（称之为接口）
                + 参数3表示同步或者异步
                => 默认就是异步
                => true异步
                => false同步
                + 注意点：
                => 咱们在实际的开发中后端会给咱们请求地址
                => 在工作有一个开发文档，需要的东西都在这个文档里面
            */
            xhr.open('get', 'http://localhost:8888/test/second')
            // console.log(xhr.readyState)
            /*
                监听请求的状态
                + onreadystatechange 监听请求状态的事件
                + responseText就是后端给咱们前端返回数据

                xhrObj.readyState - 返回当前请求的状态
                xhr.readyState = 0时-未初始化,对象已建立,尚未调用open()
                xhr.readyState = 1时-初始化,对象建立未调用send()
                xhr.readyState = 2时-发送数据,send()方法调用,但是当前的状态及http头未知,请求未完成
                xhr.readyState = 3时-数据传输中,接受部分数据
                xhr.readyState = 4时-响应内容解析完成
            */
            xhr.onreadystatechange = ()=>{
                // console.log(xhr.readyState)
                // 注意点1：判断readyState==4表示只有数据解析完成，才去接受完整的数据，如果不判断有可能接收的数据是不完整的
                if(xhr.readyState == 4){
                    // 注意点2：判断status==200表示只要状态码是200，是成功的情况再去接收数据，如果由于其他的原因请求无法成功就不接收数据
                    if(xhr.status == 200){
                        console.log(xhr.responseText)
                    }else{
                        console.log('请求失败')
                    }
                }
            }
            // 发送请求
            xhr.send()
            // console.log(xhr.readyState)
        }
    
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

ajax ——get的请求方式

<button>request</button>
    <script>
        let btn = document.querySelector('button')
        btn.onclick = function(){
            // 创建ajax对象
            let xhr = new XMLHttpRequest()
            // 请求信息
            // get请求方式，给服务器传递参数的时候，要求在open()第二个参数哪里进行查询字符串拼接
            xhr.open('get', 'http://localhost:8888/test/second?name=张三&age=18')
            // 监听请求状态
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        // 注意点：后端给咱们返回的数据是json格式，咱们要使用需要用JSON.parse()进行数据解析
                        console.log(JSON.parse(xhr.responseText))
                        console.log(xhr.responseText)
                    }
                }
            }
            // 发送请求
            xhr.send()
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

ajax ——post的请求方式

y>
    <button>request</button>
    <script>
        let btn = document.querySelector('button')
        btn.onclick = function(){
            // 创建ajax对象
            let xhr = new XMLHttpRequest()
            // 请求信息
            xhr.open('post', 'http://localhost:8888/test/fourth')
            // 请求头信息设置
            // 注意点：post请求方式要求设置请求头，这个设置内容比较长，你们最好复制
            // application/x-www-form-urlencoded表示数据以表单形式去解析，例如：咱们传递参数的时候
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            // 监听请求状态
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        // 注意点：后端给咱们返回的数据是json格式，咱们要使用需要用JSON.parse()进行数据解析
                        console.log(xhr.responseText)
                        console.log(JSON.parse(xhr.responseText))
                    }
                }
            }
            // 发送请求
            // post请求方式传递参数要求咱们把数据写在send()方法
            xhr.send('name=张三&age=18')
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

get和post的区别

• get是向服务器获取数据，post是向服务器传输数据
• get没有post安全，因为post是通过http post机制加密过
• get 传递的数据在url中看得到，而post是看不到的
• get 传递数据有大小限定，一般4kb左右，而post理论上是没有限定的
• get执行速度比post快