7.15 原生js写ajax

Posted sun1987

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了7.15 原生js写ajax相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
    <div id="nr">
        
    </div>
</body>
</html>
<script type="text/javascript">
    //1 初始化xml http request对象
    if(window.XMLHttpRequest)
    {
        var xml = new XMLHttpRequest();
    }else
    {
        var xml = new ActiveXObject(‘Microsoft.XMLHTTP‘);//针对IE5/IE6浏览器
    }
    var attr = [1,2,3];
    //2 发送数据
    //get方式发送请求
    /*xml.open("GET","chuli.php?fname="+attr,true);   //传递的变量写到url地址
    xml.send(); */
   
    //POST方式发送请求
    xml.open("POST","chuli.php",true);
    xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //传值时,要有这一句
    xml.send("fname="+attr);
    //3接受返回值
    xml.onreadystatechange=function()
    {
        if(xml.readyState==4 && xml.status==200)
        {
            var str=xml.responseText;//以字符串形式传回的,所以处理页面也要把数据整合成字符串
            console.log(str);
        }
        //document.getElementById("nr").innerHTML=str;    //找到id元素,添加返回的数据
    }
</script>

chuli.php

<?php
   $attr = $_POST[‘fname‘];
   //$str = join(",",$attr);
   echo $_POST[‘fname‘];
?>

 

以上是关于7.15 原生js写ajax的主要内容,如果未能解决你的问题,请参考以下文章

原生JS写的ajax函数

AJAX相关JS代码片段和部分浏览器模型

原生js的ajax

使用原生js写ajax

使用原生js写ajax

原生js写ajax-demo