使用Ajax发送http请求(get&post请求)
以下是正文。
同步和异步
同步和异步的概念
同步:必须等待前面的任务完成,才能继续后面的任务。
异步:不受当前任务的影响。
拿排队举例:
同步:在银行排队时,只有等到你了,才能够去处理业务。
异步:在排队的时候,可以玩手机。
异步更新网站
我们在访问一个普通的网站时,当浏览器加载完HTML、CSS、JS
以后,网站的内容就固定了。如果想让网站内容发生更改,就必须刷新页面才能够看到更新的内容。
可如果用到异步更新,情况就大为改观了。比如,我们在访问新浪微博时,看到一大半了,点击底部的加载更多,会自动帮我们加载更多的微博,同时页面并没有刷新。
试想一下,如果没有异步刷新的话,每次点击“加载更多”,网页都要刷新,体验就太不好了。
web前端里的异步更新,就要用到 Ajax。
Ajax
Ajax 的概念
在浏览器中,我们可以在不刷新页面的情况下,通过ajax的方式去获取一些新的内容。
Ajax:Asynchronous Javascript And XML(异步 JavaScript 和 XML)。它并不是凭空出现的新技术,而是对于现有技术的结合。Ajax 的核心是 js 对象:XMLHttpRequest。
发送 Ajax 请求的五个步骤
其实也就是 使用 XMLHttpRequest 对象的五个步骤。
我们先回忆一下,一个完整的HTTP请求需要的是:
请求的网址、请求方法get/post。
提交请求的内容数据、请求主体等。
接收响应回来的内容。
发送 Ajax 请求的五个步骤:
(1)创建异步对象。即 XMLHttpRequest 对象。
(2)设置请求的参数。包括:请求的方法、请求的url。
(3)发送请求。
(4)注册事件。 onreadystatechange事件,状态改变时就会调用。
如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
(5)获取返回的数据。
Ajax 请求:get 请求举例
(1)index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>
<script type="text/javascript">
// 绑定点击事件
document.querySelector('#btnAjax').onclick = function () {
// 发送ajax 请求 需要 五步
// (1)创建异步对象
var ajaxObj = new XMLHttpRequest();
// (2)设置请求的参数。包括:请求的方法、请求的url。
ajaxObj.open('get', '02-ajax.php');
// (3)发送请求
ajaxObj.send();
//(4)注册事件。 onreadystatechange事件,状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
ajaxObj.onreadystatechange = function () {
// 为了保证 数据 完整返回,我们一般会判断 两个值
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
console.log('数据返回成功');
// 数据是保存在 异步对象的 属性中
console.log(ajaxObj.responseText);
// 修改页面的显示
document.querySelector('h1').innerHTML = ajaxObj.responseText;
}
}
}
</script>
</body>
</html>
(2)02-ajax.php:
<?php
echo 'smyhvae';
?>
效果如下:
Ajax 请求:post 请求举例
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送put_ajax请求" id='btnAjax'>
<script type="text/javascript">
// 异步对象
var xhr = new XMLHttpRequest();
// 设置属性
xhr.open('post', '02.post.php');
// 如果想要使用post提交数据,必须添加此行
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 将数据通过send方法传递
xhr.send('name=fox&age=18');
// 发送并接受返回值
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
</script>
</body>
</html>
XMLHttpRequest 对象详解
我们在上一段讲解了使用 XMLHttpRequest 对象的五个步骤。本段,我们讲一下注意事项。
发送请求
发送请求的方法:
open(method, url, async);
参数解释:
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
另外还有个方法:(仅用于 POST 请求)
send(string);
POST请求时注意
如果想让 像form 表单提交数据那样使用POST请求,就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据:
xmlhttp.open("POST","ajax_test.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=smyhvae&age=27");
onreadystatechange 事件
注册 onreadystatechange 事件后,每当 readyState 属性改变时,就会调用 onreadystatechange 函数。
readyState:(存有 XMLHttpRequest 的状态。从 0 到 4 发生变化)
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status:
200: "OK"。
404: 未找到页面。
在 onreadystatechange 事件中,当 readyState 等于 4,且状态码为200时,表示响应已就绪。
服务器响应的内容
responseText:获得字符串形式的响应数据。
responseXML:获得 XML 形式的响应数据。
如果响应的是普通字符串,就使用responseText;如果响应的是XML,使用responseXML。
Ajax 传输 XML
XML 语法
XML(Extensible Markup Language):可扩展标记语言。详细语法可以查看:#。
1、XML声明:
<?xml version="1.0" encoding="UTF-8"?>
第一行的声明,指定了XML版本(1.0)以及使用的编码。
2、自定义标签:
XML中没有默认的标签,所有的标签都是我们自己已定义的。例如:
<fox></fox>
<name></name>
XML中没有单标签,都是双标签。
3、根节点:
XML中必须要有一个根节点,所有的子节点都放置在根节点下。例如:
<root1>
<name></name>
</root1>
XML 解析
因为 XML 就是标签,所以我们可以直接用解析Dom元素的方法解析 XML。
解析过程:
(1)html 部分:(包含 xml )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<person id='personXML'>
<name>fox</name>
<age>18</age>
<skill>小花花</skill>
</person>
</body>
</html>
(2)解析 xml:
<script type="text/javascript">
var xmlObj = document.getElementById("personXML");
var name = xmlObj.getElementsByTagName('name')[0].innerHTML;
console.log(name);
</script>
ajax 请求解析xml(举例)
(1)get_xml.php:(里面包含了xml文件)
<?php
// 设置 返回的为 xml
header('content-type:text/xml; charset= utf-8');
// 读取xml文件 并返回
echo file_get_contents('info/star.xml');
?>
上方代码解释:
php 自带了 读取 xml 文件的方法。
在 php 中,如果要使用xml传输数据,则需要使用header()设置返回的内容为xml。
(2)get_xml.html:(Ajax 请求,获取并解析xml)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="获取XMl数据" id='getXML'>
</body>
</html>
<script type="text/javascript">
document.querySelector('#getXML').onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get','get_XMl.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status==200) {
// 如果 返回的是 xml文件
console.log(ajax.responseText);
// 异步 对象中 有另外一个属性 用来专门获取 xml
// xml对象 在浏览器段 就是一个 document对象
// 解析时 可以直接使用 querySelector 或者 getElementById等等 document对象 有的语法
console.log(ajax.responseXML);
console.log(ajax.responseXML.querySelector('kuzi').innerHTML);
// 下面这个 页面文档对象 如果要获取某个标签
console.log(window.document);
}
}
}
</script>
Ajax 传输 JSON
JSON 的语法
JSON(JavaScript Object Notation):是ECMAScript的子集。作用是进行数据的交换。语法更为简洁,网络传输、机器解析都更为迅速。
语法规则:
数据在键值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
数据类型:
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true 或 false)
数组(在方括号中)
对象(在花括号中)
null
示例:
// 对象
{
"name":"fox",
"age":"18",
"sex":"true",
"car":null
}
// 数组
[
{
"name":"小小胡",
"age":"1"
},
{
"name":"小二胡",
"age":"2"
}
]
JavaScript中:json 字符串 <--> js 对象
基本上,所有的语言都有将 json 字符串转化为该语言对象的语法。
比如在 js中:
- JSON.parse():将JSON字符串转化为 js 对象。例如:
// 将 JSON 字符串格式化为 js 对象
var jsObj = JSON.parse(ajax.responseText);
- JSON.stringify():将 JS 对象转化为JSON字符串。例如:
var Obj = {
name: "fox",
age: 18,
skill: "撩妹"
};
console.log(Obj);
// 将 js 对象格式化为 JSON 字符串
var jsonStr = JSON.stringify(Obj);
PHP中:json 字符串 <--> js 对象
json_decode()方法:将
json
字符串转化为变量。json_encode()方法:将变量转化为
json
字符串。
代码举例:
<?php
header("Content-Type:text/html;charset=utf-8");
// json字符串
$jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';
// 字符串转化为 php对象
print_r(json_decode($jsonStr));
echo "<br>";
// php数组
$arrayName = array('name' =>'littleFox' ,'age' => 13 );
// php对象 转化为 json字符串
print_r(json_encode($arrayName));
?>
输出结果:
stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
{"name":"littleFox","age":13}
ajax 请求解析 json(举例)
(1)Person.json:
{
"name":"小强",
"skill":"砍树",
"friend":"老板"
}
(2)myJson.php:
<?php
// 读取json文件 并返回即可
echo file_get_contents('info/Person.json');
?>
(3)getJson.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>获取 json 数据</h1>
<input type="button" value="获取json" id='btnJson'>
</body>
</html>
<script type="text/javascript">
// 获取的是一个 如果要获取多个
// document.querySelectorAll(selector)
document.querySelector("#btnJson").onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get','myJson.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4&&ajax.status==200) {
// json 字符串 是字符串 所以我们可以 通过 responseText获取
console.log(ajax.responseText);
// 转化为 js对象
var jsObj = JSON.parse(ajax.responseText);
console.log(jsObj);
// 拼接ul s
var str = '';
str+='<ul>';
str+='<li>'+jsObj.name+'</li>';
str+='<li>'+jsObj.skill+'</li>';
str+='<li>'+jsObj.friend+'</li>';
str+='</ul>';
// 设置到界面上
document.body.innerHTML = str;
}
}
}
</script>
演示效果:
我的公众号
想学习代码之外的软技能?不妨关注我的微信公众号:生命团队(id:vitateam
)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
使用Ajax发送http请求(get&post请求)的更多相关文章
- ajax发送多个跨域请求回调不混乱
var count = 0; var codes = ""; function refreshCache(urls){ try { var url = urls.split(&qu ...
- ajax发送请求
首先创建XMLHttpRequest对象,利用此对象发送请求 主页面 <!doctype html> <html lang="en"> <head&g ...
- Ajax发送Post请求
Ajax发送post请求与发送get请求大致类似.以下看详细实例.首先看JSP显示页面: <form action="servlet/LoginServlet" method ...
- ajax发送异步请求
一:得到XMLHttpRequest对象 ajax其实只需要学习XMLHttpRequest一个对象 大多数浏览器都支持: var xmlHttp = new XMLHttprequest(); IE ...
- AJAX发送PUT请求引发的血案
如果直接发送ajax=put形式的请求 是拿不到请求体中的数据的. Tomcat: 1.将请求体中的数据,封装一个map ...
- ajax发送请求跨域 - uri java代理
问题:ajax发送请求出现cors跨域 解决办法:可以通过java代理的方式,后台发送请求 1.get请求 public void proxyGet(String url) { try { URL r ...
- 【转】AJAX发送 PUT和DELETE请求注意事项
jax使用restful服务发送put 和 delete 请求时直接传参会出现问题 一,采用POST + _method:delete/put + filter 的方法ajax发送put 和 de ...
- Ajax发送请求等待时弹出模态框等待提示
主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...
- AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)
<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...
随机推荐
- isinstance和issubclass、动态模块导入、异常处理
一.isinstance和issubclass isinstance:判断某个对象是否是某个类的实例,返回True或Flase issubclass:判断某个类是否是某个类的子类. 例如: class ...
- arcgis server 中Web墨卡托投影与WGS-84坐标的转换
arcgis server 中Web墨卡托投影坐标与WGS-84坐标的转换 //经纬度转墨卡托 function lonlat2mercator(lonlat){ var mercator={x:0, ...
- [one day one question] Vue数组变更不能触发刷新
问题描述:Vue数组变更不能触发刷新,特别是数组的每个元素都是对象的时候,对象中某个属性的值发生变化,根本无法触发Vue的dom刷新,这怎么破? 解决方案:this.$set(array, index ...
- hashCode方法和equals方法比较
为什么用HashCode比较比用equals方法比较要快呢?我们要想比较hashCode与equals的性能,得先了解HashCode是什么. HashCode HashCode是jdk根据对象的地址 ...
- pycharm python模版样式
问题: 我想在创建新的一些python程序的时候,希望在新文件开头添加python版本声明和一些关于时间相关的模版数据 那,如何解决? 1. pycharm ---> setting ---&g ...
- json_encode详解
<?php $json = Array ( "a" => "php" , "b" => "mysql" ...
- 一步一步从原理跟我学邮件收取及发送 8.EHLO 命令详解
我们在上一篇中解决了接收一行命令的问题后,就可以来具体的分析邮件发送过程中涉及到的 SMTP 协议内容了. 首先来看通讯过程中的第一个内容:服务器在客户端连接上来后会主动发送一个问好的信息,所以这第一 ...
- HTTP基本知识
1.TCP/IP 传输控制协议/因特网互联协议 (1)应用层:决定向用户提供应用服务时通信的活动(FTP.DNS和HTTP都属于该层). (2)传输层:提供处于网络连接中的两台计算机之间的数据传输(T ...
- 锐捷配置telnet
.组网需求 通过Telnet功能远程登录管理设备. 二.组网拓扑 三.配置要点 1.需要给交换机配置一个管理IP,如果PC与交换机不是同一个网段,需要给交换机配置一个默认网关 2.需要配置一个 ...
- auto和bool
一.auto' 1.只要在函数内部定义变量,默认是auto int num 等价于 auto int num = 10; 2.C语言中的auto关键字就是自动分配自动释放 二.bool类型 1.头文 ...