html给后台发送请求,10分钟学会——前端如何通过AJAX向后端发送请求
AJAX
基于现有的internet标准：
XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)
GET请求、异步请求、来自服务器的响应并非XML
使用方法(举例说明)：
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
// 创建XMLHttpRequest对象
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
// 创建XMLHttpRequest对象
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
使用 AJAX 修改该文本内容
修改内容
创建XMLHttpRequest对象。
给XMLHttpRequest对象添加onreadystatechange事件处理函数(响应处于就绪状态时执行的函数)。
通过XMLHttpRequest对象的responseText属性获取数据库返回值。
通过XMLHttpRequest对象的open(method,url,async)方法打开链接，send(string)方法发送请求。
其中method是请求的类型，可以使GET或POST，url文件在服务器上的位置，async可是是true(异步)或false(同步)。
string仅用于POST请求，GET请求时不需要有参数。
GET请求、异步请求、来自服务器的响应为XML
使用方法(举例说明)：
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
txt="";
//解析XML，获得一个数组
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i
{
txt=txt + x[i].childNodes[0].nodeValue + "
";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
获取我的 CD
创建XMLHttpRequest对象。
给XMLHttpRequest对象添加onreadystatechange事件处理函数(响应处于就绪状态时执行的函数)。
通过XMLHttpRequest对象的responseXML属性获取数据库返回值并解析。
通过XMLHttpRequest对象的open(method,url,async)方法打开链接，send(string)方法发送请求。
其中method是请求的类型，可以使GET或POST，url文件在服务器上的位置，async可是是true(异步)或false(同步)。
string仅用于POST请求，GET请求时不需要有参数。
GET请求、异步请求、带有回调函数
使用方法(举例说明)：
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 代码
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
//按钮的点击事件处理函数，调用loadXMLDoc函数，
function myFunction()
{
loadXMLDoc(url,function()//回调函数
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
使用 AJAX 修改文本内容
修改内容
一个POST请求的例子(异步请求,请求数据不是普通的string，是像表单那样有格式的)：
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST",url,true);
//如果需要像 HTML 表单那样 POST 数据，使用 setRequestHeader() 来添加 HTTP 头。
//然后在 send() 方法中规定要发送的数据
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("user=admin&pass=1234");
}
请求数据
//如果需要像 HTML 表单那样 POST 数据，使用 setRequestHeader() 来添加 HTTP 头。
//然后在 send() 方法中规定要发送的数据
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("user=admin&pass=1234");
这是需要注意的两行代码。