Post请求
- 简单的post请求
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
- 类似于html表单一样post数据的话
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
使用setRequestHeader()方法添加Http头,然后在send()方法中规定希望发送的数据
其中setRequestHeader(header,value)方法:
- header:规定头的名称
- value规定头的值
url-服务器上的文件
open()方法:其中的URL是文件在服务器上的位置
xmlhttp.open("GET","ajax_test.html",true);
这个文件的类型,可以是任何能够在服务器向浏览器传回响应之前,在服务器上进行执行任务的文件,例如:.html,.txt,.jsp,.asp,.php
open()方法中的async,是用来判断是否同步或者异步更新数据的参数
- asnyc=true
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
- async=false
既然使用Ajax,所以不推荐使用false(同步)
但使用async=flase时,不需要写onreadystatechange函数,将代码放到send语句后即可
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
ajax-服务器 响应
如果需要获得服务器的xangying,使用XMLHttpRequest对象的responseText或者responseXML属性即可
这其中:
responseText属性:获得字符串形式的响应数据
responseXML属性:获得XML形式的响应数据
- responseText属性:
如果服务器的响应并非XML,则使用responseText属性返回字符串形式的响应
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
- responseXML属性:
来自服务器的响应是XML文件时,使用该属性进行解析
例如:
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
onreadystatechange事件(重点部分)
但请求被发送到服务器的时候,执行一些基于响应的任务,每当readtState改变时,就会触发onreadystatechange事件,readyState属性存有XMLHttpRequest的状态信息。
三个重要属性:
-
onreadystatechange:
存储函数(或者是函数名),每当readyState属性改变的时,就会调用该函数 -
readyState:
存有XMLHttprequest的状态,并发生如下的变化:- 0:请求初始化
- 1:服务器建立已连接
- 2:请求已接受
- 3:请求处理中
- 4:请求已完成,且响应已就绪
数字是代表了各个阶段XMLrequest对象的状态
-
status:
200:ok
404:未找到页面
在onreadystatechange事件中,我们规定服务器响应已做好被处理的准备时所执行的任务
当readyState等于4且状态为200的时候,表示响应已经就绪
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数
如果网站上有多个Ajax任务,那么就可以为XMLHttpRequest对象创建一个标准函数,所有剩下的Ajax任务直接调用这个函数
这个函数应该包含URL以及发生onreadystatechange事件时执行的任务(每次调用可能不都一样)
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
学习自runoob.com