xhr如何发送post请求_使用Ajax发送http请求(get&post请求)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我,一起入门和进阶前端。

以下是正文。

同步和异步

同步和异步的概念

同步:必须等待前面的任务完成,才能继续后面的任务。

异步:不受当前任务的影响。

拿排队举例:

同步:在银行排队时,只有等到你了,才能够去处理业务。

异步:在排队的时候,可以玩手机。

异步更新网站

我们在访问一个普通的网站时,当浏览器加载完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:

Document

Ajax 发送 get 请求

// 绑定点击事件

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;

}

}

}

(2)02-ajax.php:

echo 'smyhvae';

?>

效果如下:

Ajax 请求:post 请求举例

index.html:

Document

Ajax 发送 get 请求

// 异步对象

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);

}

};

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版本(1.0)以及使用的编码。

2、自定义标签:

XML中没有默认的标签,所有的标签都是我们自己已定义的。例如:

XML中没有单标签,都是双标签。

3、根节点:

XML中必须要有一个根节点,所有的子节点都放置在根节点下。例如:

XML 解析

因为 XML 就是标签,所以我们可以直接用解析Dom元素的方法解析 XML。

解析过程:

(1)html 部分:(包含 xml )

Document

fox

18

小花花

(2)解析 xml:

var xmlObj = document.getElementById("personXML");

var name = xmlObj.getElementsByTagName('name')[0].innerHTML;

console.log(name);

ajax 请求解析xml(举例)

(1)get_xml.php:(里面包含了xml文件)

// 设置 返回的为 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)

Document

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);

}

}

}

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字符串。

代码举例:

header("Content-Type:text/html;charset=utf-8");

// json字符串

$jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';

// 字符串转化为 php对象

print_r(json_decode($jsonStr));

echo "
";

// 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:

// 读取json文件 并返回即可

echo file_get_contents('info/Person.json');

?>

(3)getJson.html:

Document

获取 json 数据

// 获取的是一个 如果要获取多个

// 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+='

  • ';

str+='

'+jsObj.name+'';

str+='

'+jsObj.skill+'';

str+='

'+jsObj.friend+'';

str+='

';

// 设置到界面上

document.body.innerHTML = str;

}

}

}

演示效果:

我的公众号

想学习代码之外的软技能?不妨关注我的微信公众号:生命团队(id:vitateam)。

扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值