[置顶] 从零开始学习WEB前端之数据交互（Ajax）(3)_H5之家

如需获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性来获取返回的数据。
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

Ajax请求
完成一个Ajax请求大致分为以下几个步骤：

示例：

> ></title> <script> window.onload = btn = document.querySelector("button"); btn.onclick = ajax; /*1.创建XMLHttpRequest对象*/ if(window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 ajax = new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 ajax = new ActiveXObject("Microsoft.XMLHTTP"); } /*设置请求方式和地址默认是异步*/ ajax.open("GET", "changeTitle.php"); /*发送请求*/ ajax.send(); /*注册回调函数*/ ajax.onreadystatechange = (ajax.readyState == 4 && ajax.status == 200) { document.querySelector("h1").innerHTML = ajax.responseText; } } } } > > </html>

php代码：

<?php header('content-type:text/html; charset= utf-8');

这里写图片描述

从上图可以看出，ajax请求并没有刷新页面。

给服务器传参数

get请求
在open（）方法中直接将参数拼接上去
post请求需要先设置请求头，然后在send（）方法中添加参数

示例：

> >="text/javascript"> window.onload = function() { document.querySelector(xmlHttp; if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } var userName = document.querySelector("#userName").value; // xmlHttp.open("GET", "showParameter.php?userName=" + userName); // xmlHttp.send(); xmlHttp.open("POST", "showParameter.php"); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.send("userName="+ userName); xmlHttp.onreadystatechange = (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.querySelector("h1").innerHTML = xmlHttp.responseText; } } } } > ====>

php代码：

<?php header('content-type:text/html; charset= utf-8'); //echo $_GET["userName"]; echo $_POST["userName"]; ?>

这里写图片描述

解析返回的json数据
JSON(JavaScript Object Notation),是ECMAScript的子集,作用是进行数据的交换,而且由于语法更为简洁,网络传输,以及机器解析都更为迅速.

语法规则:

数据类型:

// 对象 { "name":"yzq", "age":"23", "sex":"true", } // 数组 [ { "name":"yzq", "age":"16" }, { "name":"yuzhiqiang", "age":"23" } ]

json字符串与json对象的转换

JSON.parse()方法:将JSON字符串转化为JavaScript对象
JSON.stringify()方法:将JavaScript对象,转化为JSON字符串
由于老式IE(8以下)浏览器中没有JSON对象,通过导入JSON2.js框架即可解决,框架获取地址为:JSON2.js

示例：

> ></title> <script> window.onload = function() { document.querySelector(xmlHttp; if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlHttp.open("GET", "json.php"); xmlHttp.send(); xmlHttp.onreadystatechange = (this.readyState == 4 && this.status == 200) { /*将json字符串转换为js对象*/ var per = JSON.parse(xmlHttp.responseText); var p=document.querySelectorAll("p"); p[0].innerHTML = "姓名:" + per.name + "年龄：" + per.age; /*将js对象转换为json字符串*/ p[1].innerHTML=JSON.stringify(per); } } } } > > > </html>