ajax入门
栏目: JavaScript · 发布时间: 6年前
内容简介：不会给后端发送请求。只会复制粘贴，原理啥的也不了解，现在的项目是用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入门项目
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
程式之美-微軟技術面試心得
編程之美小 / 悅知文化 / 2008.06.20 / 490元
書內容分為以下幾個部分： ▓ 遊戲之樂：從遊戲和其他有趣問題出發，化繁為簡，分析總結。 ▓ 數字之魅：程式設計的過程實際上就是和數字及字元打交道的過程。這一部分收集了一些這方面的有趣探討。 ▓ 結構之法：彙集了常見的對字串、鏈表、佇列，以及樹進行操作的題目。 ▓ 數學之趣：列舉了一些不需要寫具體程式的數學問題，鍛煉讀者的抽象思考能力。 ▓ 書中絕大部分題目都提供了詳細......一起来看看 《程式之美-微軟技術面試心得》 这本书的介绍吧!
