Ajax的学习

Ajax

Ajax是Asynchronous JavaScript And XML的缩写

主要功能是实现异步刷新

首先是不通过Ajax进行数据交互

//如果不同过Ajax提交数据
<html>
<head>
    <title>Test1</title>
    <meta charset="utf-8">
</head>
<body>


<form action="./test.html">
Input Username  <input name="name" type="text" value="">
    <input type="submit" value="Submit">
</form>
<script>

</script>

</body>
</html>

//test.html中的内容
<script>
    document.write("<h3>Already Username</h3>");
</script>

效果:

跳转到test.html页面,同时传递了一个name的值,不过这里没有用到

1584889198581
1584889220332
Ajax 一种创建动态网页的技术

通过后台和服务器进行少量数据交换,Ajax可以使网页实现异步更新

网页不需要重新加载,只对某一部分进行更新

首先浏览器创建一个XMLHttpRequest()对象,然后向服务器发送HttpRquest

服务器首先处理浏览器发送的HttpRquest,然后创建响应并将数据返回浏览器

浏览器使用Javascript处理返回的数据,更新页面内容

<html>
    <head>
        <meta charset="utf-8">
    </head>
<body>
    <div id="myDiv"><h2>使用Ajax修改内容</h2></div>
    <button onclick="loadXMLDoc()">修改内容</button>

    <script>
        function loadXMLDoc(){
            //AJAX脚本执行
        }
    </script>
</body>
</html>

Ajax脚本执行,逐步解析

创建XMLHttpRequest对象

var xmlhttp;
xmlhttp = new XMLHttpRequest();

创建XMLhttpRequest对象,不同版本的浏览器也有区别

现在所有的浏览器基本都内建了XMLHttpRequest对象

而项IE5或者IE6等老版本浏览器则没有

需要使用另一个方法创建

var xmlhttp;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

所以为了不管再那个版本中都不出错,可以使用一个if语句进行判断

var xmlhttp;
if (window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}
else{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器发送请求

对于发送请求到服务器,需要使用到XMLHttpRequest对象的open()和send()方法

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

关于open方法

open(method,url,async)

其中method:请求的类型,GET或者POST

url:文件在服务器的位置

async:true(异步),false(同步) //如果XMLHttpRequest对象要使用Ajax的话,async一定要true

异步:不可以和多线程相等,虽然看起来很像同时执行

当一个线程,需要等待的时候,异步不需要阻塞当前线程等待处理完成,而是会允许后续的操作

直到其它线程处理完成,并回调通知此线程

//一个异步代码
console.log(1);
setTimeout(function(){console.log(2);},0) //设置一个定时器,打印2
console.log(3)

//打印结果:
1 3 2

关于send方法

send(string),将请求发送到服务器,仅用于POST请求

GET请求

xmlhttp.open("GET","demo.php",true);
xmlhttp.send();

但是这样有可能会得到缓存的结果

所以为了避免这种情况,可以给url设置一个唯一的ID

xmlhttp.open("GET","demo.php?t="+Math.random,true);

如果想在url上附带信息

xmlhttp.open("GET","demo.php?name=test&age=19",true);

POST请求

xmlhttp.open("POST","demo.php",true)
xmlhttp.send();

使用setRequestHeader()添加HTTP头

xmlhttp.open("POST","demo.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=test&age=19");
服务器响应

responseText获取字符串形式的响应数据

responseXML获取XML形式的响应数据

字符串形式的响应,可以这样子使用

document.getElementById("d1").innerHTML=xmlhttp.responseText;

如果是xml形式的响应

xmldoc = xmlhttp.responseXML;
txt = "";
x = xmldoc.getElementsByTagName("ARTIST");
for (var i=0;i<x.length;i++){
	txt = txt+x[i].childNodes[0].nodeValue+"<br>"; 
    /*
    childNodes返回子节点的集合
    [0]代表第一个子节点
    nodeValue是获取节点的值
    */
}
document.getElementById("d1").innerHTML=txt;
onreadystatechange事件

onreadystatechange 存储函数,如果readyState的属性发生改变,就会调用该函数

readyState放着XMLHttpRequest的状态,从0到4分别不同

0:请求未初始化,1:服务器连接已建立,2请求已接收,3:请求处理中,4:请求已完成,且响应就绪

status 200:"OK",404:"未找到页面"

所以一般有一个固定的写法

var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("d1").innerHTML=xmlhttp.responseText;
    }
}

这样子写,如果存在多个Ajax任务,就要每次都重新写一遍,就会非常麻烦。所以可以写一个标准的函数,然后每次执行Ajax任务的时候调用该函数

function loadXMLDoc(){
    //Ajax脚本执行
}

function myrequest(){
    loadXMLDoc("dome.php",function()
    {
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
        		document.getElementById("d1").innerHTML=xmlhttp.responseText;
    		}
    });
}