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':['青岛市','济南市','威海市','日照市','德州市']}
  ]";
?>

 

posted @ 2018-01-10 23:13  journeyIT  阅读(19)  评论(0编辑  收藏  举报