前端开发网络——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>

------------------------------------------------------

get:主要用来获取数据的。

post：主要用来往后端传数据的

转载于:https://www.cnblogs.com/yangpeixian/p/11117873.html

前端开发网络——Ajax（GET、POST）相关推荐

web前端开发网络课程，HTML常用的五种标签，重难点整理
前言最近在准备面试,然后复习下之前写过的项目,书籍,笔记,文章.一看很多知识点都没有印象,最可拍的是连自己为了防止忘记写的文章竟然都感觉不是自己写的.有些开始怀疑人生了. 好了,废话少说,离金三银四 ...
《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记二〇一九年二月十三日星期三2时28分54秒前提:本书适合有初步HTML.CSS.JavaScri ...
前端开发的开始---基于OO的Ajax类
一年都没写过博客了,不是懒,是不知有啥好写的...现在本人从一个后台开发.net的转向前端开发了... 之前去面试的时候,给面试官问过,有没有属于自己的ajax类,当时很奇怪,因为我基本上ajax开发 ...
ajax jq 图片上传请求头_全面分析前端的网络请求方式:Ajax ,jQuery ,axios,fetch
链接:https://juejin.im/post/5c9ac607f265da6103588b31 一.前端进行网络请求的关注点大多数情况下,在前端发起一个网络请求我们只需关注下面几点: 传入基本 ...
php考试倒计时提交系统,AJAX_基于Ajax技术实现考试倒计时并自动提交试卷，1.概述在开发网络考试系统 - phpStudy...
基于Ajax技术实现考试倒计时并自动提交试卷 1.概述在开发网络考试系统时,考试计时并自动提交试卷是必不可少的功能.由于在答卷过程中,试卷不能刷新,所以需要使用Ajax实现无刷新操作.运行本实例,访 ...
网络上比较热门的前端开发书籍汇总
这些书籍都是根据网络搜索得来的,我自己只看了其中的基本,JavaScript部分的看得比较少. 目前对js操作dom还不太熟悉 :-( ,没办法,之前一直没太关注前端开发.现在要用到,得赶紧补上了. ...
ajax获得excel文件流在前端打开_Javascript前端开发：jsonp的原理你真的懂吗？
从事前端开发的小伙伴肯定都用过jquery的ajax请求,但如果需要跨域请求,就需要用到jsonp,因为默认的ajax跨域请求会被浏览器拦截,拦截原因是因为支持Javascript的浏览器都会使用同源 ...
js初化加载页面时ajax会调用两次的原因_在前端开发中，有哪些因素会导致页面卡顿
前端开发不像后端那样,很少出现有大量算法的场景,但是前端性能也是需要优化的.好的代码是保证网页平稳高性能运行的基础,结合以往开发中遇到的场景,本文对前端网页卡顿的原因进行了梳理和分析,并给出了对应的解 ...
2021-10-19大数据学习日志——数据埋点+网络爬虫——前端开发入门
01_Web开发学习目标: 简单了解应用程序开发的分类:桌面应用程序和 Web 应用程序 1.1 桌面应用程序开发桌面应用程序开发,是一种比较基本的传统的软件开发方式,是基于 C/S 架构模式的软 ...

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

前端开发网络——Ajax（GET、POST）相关推荐

最新文章

热门文章