Ajax使用1

Ajax:
 
 
 * Ajax概述:
   * Ajax的原理
     * 什么是Ajax
       * 异步和同步
         * 同步:
   * 客户端页面向服务器端发送请求，直到服务器端将响应发送回来，这个过程中，页面是不能做任何事情。
 * 异步:
   * 客户端页面向服务器端发送请求，直到服务器端将响应发送回来，这个过程中，页面可以去做任何事情。
       * Ajax的定义:
         (不严格)客户端与服务器端进行交互,而无需刷新当前页面的技术.
       * 作用:
         * 可以实现同步交互所不能完成的功能，提高同步实现的效果。
 * 页面减少了，只用一个页面即可。
       * 缺点:
         * 小则怡情，大则伤身（Ajax的异步实现不能过多使用）
     * Ajax的原理：

 

     * Ajax的对象:
       * Ajax的核心对象:XMLHttpRequest（XHR）对象
         * IE使用的是XMLHTTP对象
       * 浏览器兼容性:
         * 判断当前用户的浏览器是IE还是其他浏览器
       * 创建Ajax对象:
 
 
function getXHR(){
var xhr;
if(window.ActiveXObject){
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xhr=new XMLHttpRequest();
}
return xhr;
}

 

   * Ajax对象的属性和方法
     * 方法
       * open( method, url, async )方法:向服务器端创建一个请求
         * method参数：指定当前请求的方式，GET和POST。
         * url参数：指定当前请求的服务器端地址
         * async参数：指定当前请求是否为异步，Boolean值。
             * true：表示异步
             * false：表示同步，目前W3C的最新规范不建议使用同步。
       * send()方法：发送请求的参数。
         * 参数：请求参数
         * 0 - 尚未初始化
 * 1 - 正在发送请求
 * 2 - 请求完成
 * 3 - 正在响应
 * 4 - 响应完毕
       * status：服务器端返回的状态码
         * 404 - 找不到网页
 * 200 - OK
 * 302 - 请求转发
 * 304 - 请求缓存
 * 500 - 内部服务器错误
       * responseText：表示的是服务器端返回的文本内容。
       * responseXML：表示的是服务器端返回的XML格式内容。
     * 事件
       * onreadystatechange：用于监听服务器端的状态变化
         * 当readyState属性的值变化时，会触发onreadystatechange事件

 

 

 * Ajax的作用:
   * GET请求：
     * 创建Ajax的核心对象：略
     * 创建请求：
        open( method , url )：
* 如果GET方式的话，请求参数需要添加在URL后面
     * 发送请求
       send()方法：
       * 如果GET方式的话，send( null )
     * 接收响应
       onreadystatechange事件
       readyState和status属性：
       * readyState属性：Ajax从请求到响应的整个过程
       * status属性：告诉我们Ajax请求是否成功
       * responseText属性：接收服务器端的响应
   * POST请求：（与GET方式的区别）
     * open()方法中的method参数为POST
     * 如果请求方式为POST的话，send()方法可以发送请求参数
     * 设置请求头信息：
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 

 

 

 

 

 

 * Ajax的应用:
 
 
*简单实例：
*index.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<h1>Ajax的GET方式请求测试</h1>
<p>
你看到的这些内容都是当前HTML页面的！
</p>
<hr>
<button id="ajaxsend">ajax请求</button>
<div id="mydiv"></div>
</body>
<script>
var ajaxsend = document.getElementById("ajaxsend");
ajaxsend.onclick=function(){
function getXHR(){
var xhr;
if(window.ActiveXObject){
xhr=new ActiveXObject("Microsoft.XMLHttp");
}else{
xhr=new XMLHttpRequest();
}
return xhr;
}
// 1 创建Ajax的核心对象
var XmlHttpRequest = getXHR();
// 2 创建请求，使用open( method，url，async )方法
// 注意：当请求方式为GET时，请求参数添加在open()方法url参数的后面。
XmlHttpRequest.open("GET", "server.php", true);
// 3 发送请求，使用send( 请求参数 )方法
// 注意：
// 如果Ajax请求方式是GET方式的话，send()方法是不能发送任何请求数据的。
// 该方法（步骤）是不能被省略的，send(null)
XmlHttpRequest.send(null);
// 4 接收响应，使用onreadystatechange事件（readyState，status，responseText属性）
XmlHttpRequest.onreadystatechange = function(){// function就是onreadystatechange事件的处理函数
// 接收服务器端的响应数据内容，在该处理函数中完成
// a 保证readyState的值为4
if(XmlHttpRequest.readyState==4){
// b 保证status的值为200
if(XmlHttpRequest.status==200){
// 保证服务器端可以正确地响应数据内容
var data = XmlHttpRequest.responseText; // responseText属性只能文本格式的响应数据。
var mydiv = document.getElementById("mydiv");
mydiv.innerHTML = data;
}
}
}
}
</script>
</html>
 
*server.php
<?php
echo "Hello Ajax php";
?>

 

 

 
 
*城市联动：
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>案例</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 xhr = getXHR();
xhr.open("get","province.php",true);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
var provinces = xhr.responseText;
 
var provinceArr = provinces.split(",");
for(var i=0;i<provinceArr.length;i++){
var province = provinceArr[i];
 
var option = document.createElement("option");
var textEle = document.createTextNode(province);
option.appendChild(textEle);
 
provinceSel.appendChild(option);
}
}
}
provinceSel.onchange = function(){
// 清除第二个城市的option
var citySel = document.getElementById("city");
var cityoptions = citySel.getElementsByTagName("option");
// js中的数组长度问题：是可变的
for(var z=cityoptions.length-1;z>0;z--){
var cityoption = cityoptions[z];
citySel.removeChild(cityoption);
}
 
// 表示选择了不同的省份
var provinceValue;
//1 获取用户当前选择的省份名称
var myoptions = provinceSel.getElementsByTagName("option");
for(var i=0;i<myoptions.length;i++){
var option = myoptions[i];
if(option.selected){
provinceValue = option.value;
break;
}
}
//2 触发Ajax异步请求
xhr.open("POST","cities.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;
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 "辽宁省,吉林省,山东省,河南省,福建省";
?>
 
cities.php：
<?php
$province = $_REQUEST["province"];
file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND);
$cities = "";
if($province=="吉林省"){
$cities = "长春市,吉林市,松原市,延边市,四平市";
}else if($province=="辽宁省"){
$cities = "沈阳市,大连市,铁岭市,盘锦市,葫芦岛市";
}else if($province=="山东省"){
$cities = "青岛市,济南市,威海市,日照市,德州市";
}
echo $cities;
?>
posted @ 2018-01-10 23:11  journeyIT  阅读(22)  评论(0)    收藏  举报