前端开发网络——Ajax（GET、POST）

ajax请求的过程

我们平时输入的网址，比如www.baidu.com，就会被解析成14.215.177.39这一串数字，然后发送请求给后台服务器（客户端发送http请求）。

服务器会确认你发送的是什么请求，需要请求什么东西（三次握手）。

拿到服务器返回的数据后就传回给页面了，这时候就跟服务器告别（四次挥手）。

传回给浏览器渲染页面（html，css，js）。

Ajax的实际运作，好比做一个定外卖的过程

封装Ajax

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <form>
11         <input type="text" name="urername" id="username">
12         <input type="text" name="age" id="age">
13         <input type="submit" id="sbm" value="提交">
14     </form>
15     <ol id="ol"></ol>
16     <button id="btn">请求新闻</button>
17     <!-- Ajax
18     1.浏览器
19     2.Ajax对象
20     3.Ajax.open(method, url, true);
21     4.Ajax.send();
22     5.onreadtstatechage 4
23     6.status == 200 403 503 -->
24 
25     <script>
26     //请求新闻的监听事件
27     btn.onclick = function(){
28         ajaxFunc('GET', './getNews.php', '', showList, true);
29     }
30 
31     //请求form表单的监听事件
32     sbm.onclick = function(e){
33         e.preventDefault();//取消默认提交form表单的事件
34         var data = 'username=' + username.value + '&age=' + age.value;
35         ajaxFunc('POST', './post.php', data, showPerson, true);
36     }
37 
38 
39 
40     //封装的Ajax函数
41     function ajaxFunc(method, url, data, callback, flag){
42 
43         //创建Ajax对象
44         var xhr = null;
45         if(window.XMLHttpRequest){//浏览器兼容
46             xhr = new XMLHttpRequest();
47         }else{
48             xhr = new ActiveXObject('Microsoft.XMLHttp');
49         }
50 
51         method = method.toUpperCase();
52         if(method == 'GET'){//判断传入的是GET请求还是POST请求
53             //向后端发送请求，获取数据
54             xhr.open(method, url, + '?' + data, flag);//请求方式  请求地址  异步请求
55             //把Ajax发送出去
56             xhr.send();
57         }else if(method == 'POST'){
58             //向后端发送请求，获取数据
59             xhr.open(method, url, flag);//请求方式  请求地址  异步请求
60             //设置请求头
61             xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
62             //把Ajax发送出去
63             xhr.send(data);
64         }
65 
66         //监听返回的数据     数据解析分为4个阶段 1.读取 2.已读取 3.交互中 4.完成
67         xhr.onreadystatechange = function(){ //数据状态改变一次就会触发一次
68             if(xhr.readyState == 4){ //数据是不是为4的状态，4为响应内容解析完成
69                 if(xhr.status == 200){
70                     
71                     callback(xhr.responseText);
72                 }
73             }
74         }
75     }
76 
77     //GET请求的回调函数
78     function showList(data){
79         var value = JSON.parse(data);
80         var str = '';
81         value.forEach(function(ele, index){
82             str += '<li>' + ele.title  + '-' + ele.date + '</li>';
83         })
84         ol.innerHTML = str;
85     }
86 
87 
88     //POST请求的回调函数
89     function showPerson(data){
90         alert(data);
91     }
92     </script>
93 </body>
94 </html>