使用原生JavaScript发送ajax请求

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用原生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     //获取按钮list
33     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.php
40             ajax.open(post,server1.php);
41         //因为是post请求所以必须加上setRequestHeader(get请求可以忽略)
42         ajax.setRequestHeader(Content-type,application/x-www-form-urlencoded);
43                //请求所带的参数 name=this.value
44         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.responseText
52             };
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请求的主要内容,如果未能解决你的问题,请参考以下文章

Ajax--Ajax基于原生javascript:创建Ajax对象链接服务器发送请求接受响应结果

使用原生JS实现简单的ajax

原生JS发送Ajax请求

原生Ajax书写

原生JS发送Ajax请求JSONP

原生javaScript完成Ajax请求