ajax入门
栏目: JavaScript · 发布时间: 5年前
内容简介：不会给后端发送请求。只会复制粘贴，原理啥的也不了解，现在的项目是用axios，但是axios是以Ajax+Promise为基础的，所以先学一波Ajax。Ajax可以做到局部刷新，无需重新刷新页面，拥有更好的用户体验。Ajax有两种请求方式——POST和GET，模板如下：
不会给后端发送请求。只会复制粘贴，原理啥的也不了解，现在的项目是用axios，但是axios是以Ajax+Promise为基础的，所以先学一波Ajax。
Ajax可以做到局部刷新，无需重新刷新页面，拥有更好的用户体验。
Ajax有两种请求方式——POST和GET，模板如下：
GET请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
// 按钮点击事件触发的函数
function loadXMLDoc()
{
var xmlhttp;
// XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 每当 readyState 属性改变时，就会调用该函数
xmlhttp.onreadystatechange=function()
{
// readyState存储着XMLHttpRequest的状态，从0-4
// 0——请求未初始化（还没有调用open()）
// 1——服务器连接已建立（还没有调用send()）
// 2——请求已接收
// 3——请求处理中
// 4——请求已完成，且响应已就绪
// status值的解释
// 1XX 信息响应类，表示接收到请求并且继续处理
// 2XX 处理成功响应类，表示动作被成功接收、理解和接受
// 3XX 重定向响应类，表示为了完成指定的动作，必须接受进一步处理
// 4XX 客户端错误，客户请求包含语法错误或者是不能正确执行
// 5XX 服务器错误，服务器不能正确执行一个正确的请求
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
// open(method, url, async) 规定请求的类型、URL以及是否异步处理请求
// {Param} method:请求的类型；GET或POST
// {Param} url:文件在服务器上的位置
// {Param} async:true——异步；false——同步。不推荐使用false，若是用了false，就不需要写onreadystatechange()函数
xmlhttp.open("GET","/try/ajax/demo_get.php?num=" + Math.random(),true);
// send(string) 将请求发送到服务器
// {Param} string 仅用于POST请求
xmlhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
POST请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
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","/try/ajax/demo_post2.php",true);
// setRequestHeader(header,value) 向请求添加HTTP头
// {Param} header 规定头的名称
// {Param} value 规定头的值
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 发送的数据
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
两种请求的优缺点：
GET更简单、更快；
POST可以发送大量数据，更加稳定可靠。
具体的优缺点可以看后面的链接，里面还详讲了三次握手： GET和POST请求的优缺点
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- TiDB入门（四）：从入门到“跑路”
- MyBatis从入门到精通(一)：MyBatis入门
- MyBatis从入门到精通(一)：MyBatis入门
- Docker入门（一）用hello world入门docker
- 赵童鞋带你入门PHP（六） ThinkPHP框架入门
- 初学者入门 Golang 的学习型项目，go入门项目
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Music Recommendation and Discovery
Òscar Celma / Springer / 2010-9-7 / USD 49.95
With so much more music available these days, traditional ways of finding music have diminished. Today radio shows are often programmed by large corporations that create playlists drawn from a limited......一起来看看 《Music Recommendation and Discovery》 这本书的介绍吧!
