首页 > 代码库 > 使用原生JavaScript发送ajax请求
使用原生JavaScript发送ajax请求
关于使用原生JavaScript发送异步请求给服务端。
准备工作：
代码编写工具用的是sublime 服务端使用的是wamp搭的一个本地Apache服务器，主要用来返回数据 方便测试
步骤：
浏览器端
html标签绑定事件发送ajax请求---->
五步操作：1 创建异步对象XMLHttpRequest;
2 设置method url
3 发送请求给服务端
4 注册事件
5 在事件中获取服务端返回的数据，进行操作。
服务器端
1 获取请求数据
2 返回结果给浏览器
下面来一个小demo1做一个简单的请求操作 点击按钮发送请求给服务器端，返回图片地址，渲染div的背景图
nobibi 上代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 .div1{ 5 width: 200px; 6 height: 200px; 7 border: 1px solid red; 8 margin: 20px auto; 9 }10 .div2{11 width: 300px;12 height: 100px;13 border: 1px solid red;14 margin: 20px auto;15 }16 body{17 text-align: center;18 }19 </style>20 <head>21 <meta charset="utf-8">22 </head>23 <body>24 <div class=‘div1‘></div>25 <div class=‘div2‘></div>26 <input type="button" value="baby" class=‘starBtn‘>27 <input type="button" value="hxm" class=‘starBtn‘>28 <input type="button" value="lh" class=‘starBtn‘>29 </body>30 </html>31 <script>32 //获取按钮list33 var btnList = document.querySelectorAll(‘.starBtn‘);34 //循环绑定点击事件35 for (var i = 0; i < btnList.length; i++) {36 btnList[i].onclick = function(){37 //新建异步处理对象38 var ajax = new XMLHttpRequest();39 //设置请求类型为post,请求的页面为server1.php40 ajax.open(‘post‘,‘server1.php‘);41 //因为是post请求所以必须加上setRequestHeader(get请求可以忽略)42 ajax.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);43 //请求所带的参数 name=this.value44 ajax.send(‘name=‘+this.value);45 //绑定onreadystatechange事件46 ajax.onreadystatechange=function(){47 //判断如果请求的状态是否成功48 if (ajax.readyState==4&&ajax.status==200) {49 //根据返回值ajax.responseText操作dom元素更改div的背景图片 50 document.querySelector(‘.div1‘).style.background = ‘url(‘+ajax.responseText+‘) no-repeat center/cover‘;51 document.querySelector(‘.div2‘).innerHTML = ajax.responseText52 };53 }54 }55 };56 57 </script>
浏览器端代码结束。
下面是服务端代码，服务端是用php写的简单几句
<?php //获取post请求的数据 $key = $_POST[‘name‘]; //关系数组 $starArr = array( ‘baby‘=>‘images/baby.jpg‘, ‘hxm‘=>‘images/hxm.jpg‘, ‘lh‘=>‘images/lh.jpg‘ ); $value = $starArr[$key];//返回图片地址 echo $value; ?>
至此 一个简单的使用原生JavaScript写的异步请求 完成。
使用原生JavaScript发送ajax请求
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。