标题:ajax xhr的使用 | 作者: catfish | 时间:2019年12月17日
暂无法显示图片

什么是ajax?

ajax是Asynchronous JavaScript And XML 的缩写。翻译过来就是异步javascript和XML,也就是说以前的ajax的传输是传输xml文件。现在多半用json,因为它的文件传输更加方便。它可以局部刷新浏览器,在不用刷新全部数据的情况下能更新浏览器数据。

基本使用

<html>
<head>
<meta charset="utf-8">
<title>html的基本使用</title>
<script>

// document.getElementsByTagName("button").onclick = loadXMLDoc  还可以这么写,不加括号。加了会立刻执行。   
function loadXMLDoc()
{
var xmlhttp;   // 先定义一个变量来给对象赋值
if (window.XMLHttpRequest)                    // 根据浏览器兼容性来给变量赋值
  { 
  xmlhttp=new XMLHttpRequest();
  }
else
  { 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()      // 基本套路
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","/statics/demosource/demo_post.php",true);
xmlhttp.send();                                                    // 必须要的结构
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
 
</body>
</html>

在推荐一种代码写法,这种写法更为简洁:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tryrun 1</title>
</head>
<body>
    <div id="view">
        <p>点击下面的按钮,将 Ajax 请求回来的数据更新在该文本内</p>
    </div>
    <button type="button" id="btn">发起 Ajax 请求</button>

    <script>
        document.getElementById("btn").onclick = ajaxRequest;

        function ajaxRequest () {
            var xhr = new XMLHttpRequest();

            xhr.open("GET", "https://www.w3cschool.cn/statics/demosource/ajax_info.txt", true);
            xhr.send();

            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById("view").innerHTML = xhr.responseText;
                }                
            }
        }
    </script>
</body>

填坑过程

为什么status等于0?

(1). url不存在

(2). url不可到达

(3). 发送了跨域请求:凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。http等协议不同,域名不同,端口不同,主机名不同。

(4). 数据格式出错:不是json或者xml文件。

(5). ajax在调用之前,就已经取消了。也就是说根本没有调用这个ajax请求。

同步与异步错误

XMLHttpRequest只能用异步,同步会产生警告且不能使用。非http访问即访问本地文件时不能使用chrome等核心浏览器。

在其他地方抄的代码在自己本机上不能运行?

跨域请求。请使用本机url来进行测试。

Django与xhr的结合

django中的JsonResponse可以与xhr结合来进行页面的局部刷新。

如何将responesText里面的字符串转换成JSON?

方法一:

var json=JSON.parse(request.responseText);  
alert(json.city); 

方法二:

var result = request.responseText;  
var jsonObject=eval("("+result+")");  
alert(jsonObject.telephone)

 

我要评论

没有登录?请先登录后再评论

最新评论

暂无人评论,来抢个沙发吧!