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入门项目
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
ACM国际大学生程序设计竞赛题解
赵端阳//袁鹤 / 电子工业 / 2010-7 / 39.00元
随着各大专院校参加ACM/ICPC热情的高涨，迫切需要有关介绍ACM国际大学生程序设计竞赛题解的书籍。《ACM国际大学生程序设计竞赛题解(2)》根据浙江大学在线题库的部分题目，经过分类、筛选、汇编，并进行了解答（个别特别简单或者特别复杂的题目未选择），比较详细地分析和深入浅出地讲解了解题的方法和用到的算法。题目的类型包括基础编程、模拟、字符串处理、搜索、动态规划、回溯、图论、几何和数学题。 ......一起来看看 《ACM国际大学生程序设计竞赛题解》 这本书的介绍吧!
