Ajax使用2
回顾第一天的内容:
* Ajax的定义(不严格)
* 客户端与服务器端之间进行交互,而无需刷新当前页面。
* 异步与同步:
* 同步:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,客户端不能做任何事情。
* 异步:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,客户端可以做任何事情。
* 如何实现Ajax:
* Ajax核心对象:XMLHttpRequest对象
* IE浏览器提供了XMLHttp对象,该对象功能相同。
* 创建Ajax核心对象时,考虑浏览器兼容性。
function getXHR(){
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
}
* 核心对象的属性和方法:
* open( method , url , boolean)方法:创建请求
* method:设置当前请求方式为GET还是POST等。
* url:设置当前请求的连接。
* boolean:设置是否是异步请求,true(默认值)表示异步。
* send()方式:发送请求。
* 如果是GET方式:send(null)表示不能发送任何请求参数。
* 该步骤不能被省略!
* 如果是POST方式:可以使用send()方法发送请求参数。
* 在使用send()方法前,设置请求头信息:
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); -- MIME类型
* onreadystatechange事件:监听服务器端的通信状态的变化。
* readyState属性:用于获取服务器端的通信状态
* 0 - 未初始化
* 1 - 正在请求
* 2 - 请求完毕
* 3 - 正在响应
* 4 - 响应完毕
* status属性:表示服务器端的状态码。
* 200:表示成功
* 404:表示找不到网页
* 500:表示服务器端内部错误
* responseText属性:接收服务器端的响应数据。
* 接收回来的数据类型是文本格式。
* 实现Ajax的步骤:
* 创建Ajax的核心对象:固定写法
* 创建请求:open()
* 发送请求:send()
* 接收响应:
* onreadystatechange事件
* readyState属性
* status属性
* responseText属性
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>城市联动</title>
<link rel="stylesheet" href="">
</head>
<body>
<select id="province">
<option>-请选择-</option>
</select>
<select id="city">
<option>-请选择-</option>
</select>
</body>
<script>
var provinceSel = document.getElementById("province");
// 当页面载入时,读取province的信息(省份)
function getXHR(){
var xhr;
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHttp");
}else{
xhr = new XMLHttpRequest();
}
return xhr;
}
//1 创建核心对象
var xhr = getXHR();
//2 创建请求
xhr.open("GET" , "province.php" , true);
//3 发送请求
xhr.send(null);
//4 接收响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var data = xhr.responseText;
// 将接受的字符串进行切割,转换成数组
// alert(data);
var dataArr = data.split(",");
// 遍历该数组,获取每一个省份信息
for(var i = 0 ; i<dataArr.length ; i++){
var provinceText = dataArr[i];
// 创建option标签,添加到province的select标签中
// alert(provinceText);
var option = document.createElement("option");
var text = document.createTextNode(provinceText);
option.appendChild(text);
provinceSel.appendChild(option);
}
}
}
// 根据用户选择不同的省份,读取并显示不同城市信息
//问题:怎么能知道用户选择了哪个省份?触发onchange事件
provinceSel.onchange=function(){
//把之前的选择的省份下的城市清空,也就是将city的select标签下的所有option清空
//a 获取city的select标签
var citySel = document.getElementById("city");
//b 获取对应所有的option标签
var cityoptions = citySel.getElementsByTagName("option");
//c 遍历所有option标签,逐一删除
var cityoptions = citySel.getElementsByTagName("option");
for(var z=cityoptions.length-1;z>0;z--){
var cityoption = cityoptions[z];
citySel.removeChild(cityoption);
}
//1 获取用户当前选择的省份信息
//a 获取province下所有option标签
var proptions = provinceSel.getElementsByTagName("option");
var provinceValue;
//b 遍历所有option标签,判断是否具有selected属性
for(var i = 0 ; i < proptions.length ; i++){
var proption = proptions[i];
if(proption.selected){
//c 通过option标签的value属性获取对应的省份信息
provinceValue = proption.value;
break;
}
}
// 根据用户选择的省份,Ajax异步请求对应的城市信息
var xhr = getXHR();
xhr.open("POST" , "city.php" , true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("province="+provinceValue);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var cities = xhr.responseText;
// alert(cities);
var citiesArr = cities.split(",");
for(var i = 0 ; i < citiesArr.length ; i++){
var city = citiesArr[i];
var option = document.createElement("option");
var textEle = document.createTextNode(city);
option.appendChild(textEle);
citySel.appendChild(option);
}
}
}
}
</script>
</html>
province.php:
<?php
echo "江苏省,浙江省,辽宁省,吉林省,山东省";
?>
city.php:
<?php
$province = $_REQUEST["province"];
$info ="";
if($province == "江苏省"){
$info= "无锡市,泰州市,常州市,苏州市,昆山市,江阴市";
}else if($province == "浙江省"){
$info= "杭州市,温州市,宁波市";
}else if($province=="辽宁省"){
$info= "沈阳市,大连市,铁岭市,盘锦市,葫芦岛市";
}else if($province=="吉林省"){
$info= "长春市,吉林市,松原市,延边市,四平市";
}else if($province=="山东省"){
$info= "青岛市,济南市,威海市,日照市,德州市";
}
echo $info;
?>
Ajax02:
* XML
* 概述:
* XML译为可扩展标记语言,全称eXtensible Markup Language。
* 发展过程:
* 基于XML基础上,出现XHTML语言 - 替代HTML。
* XHTML 发展到2.0,XML野心破灭了。
* 作用:
* 用于数据的存储(数据的传输 -请求和响应)
* 用于配制文件(了解)
* 特点:
* 使用标签,XML的标签允许自定义的。
* 标签同样具有文本和属性。
* XML解释:利用DOM解析
* 语法:
* XML文件的扩展名为".xml"
* XML声明:
* 注意:
* 声明必须从文档的0行0列位置开始
* 声明必须为<?xml开头,以?>结束
* 属性:
* version属性:表示当前XML文件的版本,固定为1.0.
* encoding属性:表示当前XML文件的编码。
* 元素
* XML标签对大小写敏感。
* 元素具有属性和文本,包含其他元素。
* 属性:
* 属性值必须用引号引起来,单双引号均可使用。
* XML应用:
* JavaScript解析XML
* 使用JavaScript中的DOM(XML DOM)解析XML
* 通过XML DOM对象解析对应的XML内容:
* 其他浏览器
var parser = new DOMParser();
parser.parseFromString( xml, type );
* xml参数:指定当前要解析的XML名称。
* type参数:指定当前要解析的XML类型。("application/xml"或"text/xml")
* 返回值:表示解析XML后得到可以被DOM解析的内容。
* IE浏览器
var xmlDoc = new
ActiveXObject("Microsoft.XMLDOM");
* 利用DOM解析XML:
* getElementById()和getElementsByName()方法不能使用。
* getElementsByTagName()方法是有效的。
* 注意:
* 目前W3C最新规范不允许读取本地的XML文档,只能读取XML格式的字符串。
* 之前的W3C规范是允许读取本地的XML文档。
* Ajax解析XML
* Ajax的请求参数与响应数据更改为XML格式。
* 请求参数的格式为XML:
* 参数的类型依旧是字符串类型。
* 该字符串的内容为XML格式。
* 响应数据的格式为XML:
* 在Ajax中使用xhr对象的responseXML属性接收。
* (推荐)接收的数据格式已经是可以解析的XML格式,不需转换。
* 使用responseText来接收,利用XML解析器手动转换。
* 利用XML DOM解析
* JSON
* 概述:
* 定义:是一种轻量级的数据交换格式。
* 特点:
* 易于程序员阅读
* 易于计算机解析
* 用途:用于数据交换
* 结构:
* JavaScript Object:{ key : value }
* JavaScript Array:[ 1,2,3,4 ]
* JSON文件的扩展名为".json"
* 使用:
* JavaScript中如何解析JSON格式:
* eval()方法:将JSON格式的字符串转换成Object或Array。
* 注意:eval("("+JSON格式的字符串+")")
原因:不加"()"时,可能导致JSON的转换失败。
* JSON.parse()方法:将JSON格式的字符串转换成Object或Array。
* JSON.stringify( jsObj )方法:将Object或Array转换成JSON格式的字符串
* 注意:IE 7 不能使用JSON.parse()和JSON.stringify()
* 应用:
* Ajax中使用JSON(二级联动)
//创建解析XML的解析器内容,返回可以解析的内容
function getXmlDoc(xml){
var xmlDoc;
if(window.DOMParser){
//其他浏览器
var parser = new DOMParser();
xmlDoc = parser.parseFromString(xml, "application/xml");
}else{
var parser = new ActiveXObjext("Microsoft.XMLDOM");
parser.async = false;
xmlDoc = parser.loadXML(xml);
}
return xmlDoc;
}
JSON实现市级联动:
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JSON的二级联动</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script src="myutils.js"></script>
</head>
<body>
<select id="province">
<option>-请选择-</option>
</select>
<select id="city">
<option>-请选择-</option>
</select>
</body>
<script>
var provinceSel = document.getElementById("province");
var dataJSON;
var xhr = getXHR();
xhr.open("GET","server.php",true);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
var data = xhr.responseText;
// 将JSON格式的字符串进行转换
dataJSON = eval("("+data+")");
for(var i=0;i<dataJSON.length;i++){
var dataObj = dataJSON[i];
// alert(dataObj.province);
var provinceValue = dataObj.province;
var option = document.createElement("option");
var textEle = document.createTextNode(provinceValue);
option.appendChild(textEle);
provinceSel.appendChild(option);
}
}
}
provinceSel.onchange = function(){
//把之前的选择的省份下的城市清空,也就是将city的select标签下的所有option清空
//a 获取city的select标签
var citySel = document.getElementById("city");
//b 获取对应所有的option标签
var cityoptions = citySel.getElementsByTagName("option");
//c 遍历所有option标签,逐一删除
var cityoptions = citySel.getElementsByTagName("option");
for(var z=cityoptions.length-1;z>0;z--){
var cityoption = cityoptions[z];
citySel.removeChild(cityoption);
}
var province = this.value;
var cities;
for(var i=0;i<dataJSON.length;i++){
var dataObj = dataJSON[i];
var provinceValue = dataObj.province;
if(province==provinceValue){
cities = dataObj.city;
break;
}
}
for(var i=0;i<cities.length;i++){
var city = cities[i];
var option = document.createElement("option");
var textEle = document.createTextNode(city);
option.appendChild(textEle);
var citySel = document.getElementById("city");
citySel.appendChild(option);
}
}
</script>
</html>
server.php:
<?php
echo "[
{'province':'江苏省','city':['无锡市','泰州市','常州市','苏州市','昆山市','江阴市']},
{'province':'浙江省','city':['杭州市','温州市','宁波市']},
{'province':'辽宁省','city':['沈阳市','大连市','铁岭市','盘锦市','葫芦岛市']},
{'province':'吉林省','city':['长春市','吉林市','松原市','延边市','四平市']},
{'province':'山东省','city':['青岛市','济南市','威海市','日照市','德州市']}
]";
?>