javascript、ajax基础

内 容

本周学习知识点： 1. MVC框架 2. Javascript基础 3. DOM、事件 4. Ajax

学习总结： 1. MVC框架 MVC解释 M-------处理数据库的模型 V-------VIEW显示数据 C-------Controller -----控制器 增加安全性 defined('APP_NAME') || die('非法操作');   Init.php初始化文件： <?php    define('ROOT_PATH',str_replace('init.php','',str_replace('\\','/',__FILE__)))   ; include 'configs/config.php';//加载配置文件 //获取地址栏传递的参数  c控制器   a动作 if(isset($_REQUEST['c'])){          //传递值 $controller=new $_REQUEST['c'].'Controller'; }else{           //默认值 if(APP_NAME=='home'){                 //home前台controller $controller=new homeController(); }elseif(APP_NAME=='admin'){                //admin后台controller $controller=new adminController(); } } if(isset($_REQUEST['a'])){           //传递值 $action = $REUQEST['a'].'Action'; }else{           //默认值 if(APP_NAME=='home'){                //home前台 action $action = 'homeAction'; }elseif(APP_NAME=='admin'){                 //admin后台  action $action ='adminAction'; } } $controller->$action();         //自动加载 function __autoload($classname){ if(strpos($classname,'Controller')!==false){ if($classname=='baseController'){                              //加载基类 include 'controllers/baseController.class.php'; }else{ include 'controllers/'.APP_NAME.'/'.$classname.'.class.php'; } }elseif(strpos($classname,'Model')!==false){ include 'models/'.$classname.'.class.php'; }elseif($classname=='Smarty'){ include 'plugins/Smarty/Smarty.class.php'; }elseif(strpos($classname,'Helper')!==false){ include 'helpers/'.$classname.'.class.php';  } }    baseController.class.php <?php class baseController{ protected $smarty; public function __construct (){ $this->initSmarty();   } public function initSmarty(){ //include ROOT_PATH.'plugins/smarty/Smarty.class.php'; $this->smarty=new Smarty(); $this->smarty ->template_dir='views/'.APP_NAME; $this->smarty ->compile_dir='./data'; $this->smarty->left_delimiter='<{'; $this->smarty->right_dilimiter='}>'; } }   goodsController.class.php <?php defined('APP_NAME') || die('非法操作'); include ROOT_PATH.'controllers/baseController.class.php'; class goodsController extends baseController{ public function addAction(){          $this->add();  $this->display('test.tpl'); } public function selectAction(){ include ROOT_PATH.'models/goodsModel.class.php'; $model=new goodsModel(); $url=$model->getUrl(); $this->smarty->assign('name',$url); $this->smarty->display('test.tpl'); } }   baseModel.class.php <?php defined('APP_NAME') || die('非法操作'); class baseModel{ private $hostname; private $dbname; private $username; private $password; private $source;   public function __construct(){ global $config; $this->hostname = $config['db']['host'] ; $this->dbname =  $config['db']['dbname'] ; $this->username =  $config['db']['user'] ; $this->password = $config['db']['pass'] ; $this->connect(); }   public function connect(){ $this->source = mysql_connect($this->hostname,$this->username,$this->password); mysql_select_db($this->dbname); mysql_query("set names utf8"); } //查询一条记录的方法 public function getRow($sql){ $result = mysql_query($sql); $row = mysql_fetch_assoc($result); if($row){ return $row; }else{ return false; } } //查询一个字段的方法 public function getOne($sql){ $result = mysql_query($sql); $row = mysql_fetch_array($result); if($row){ return $row[0]; }else{ return false; } }   //查询所有数据的方法 public function getAll($sql){ $result = mysql_query($sql); $rows = array(); while($all = mysql_fetch_assoc($result)){ $rows[] = $all; } if($rows){ return $rows; }else{ return null; } } //封装更新、删除、插入的语句（dml语句），不需要获得数据库的值 public function query($sql){ $result = mysql_query($sql); if($result){ return true; }else{ return false; } } public function __destruct(){ mysql_close($this->source); } } 2．Javascript基础 javascript 的数据类型： 原始的数据类型（基本的数据类型）： Undefined、null、boolean、number、string： 引用数据类型（对象数据类型）： array：数组、object：对象、function：函数 1. undefined： 如果声明了一个变量，但是没有初始化值，这个时候这个变量保存的就是一个undefied，一个未定义的变量就是undefined  如果一个变量的值是undefined，那么这个变量的类型就是 undefined类型，undefined 这种类型只有一个值就是 undefined   2. null： 未定义的一个对象（最初设计的一个失误）----->    undefined   和  null 区别: 未定义的变量 就是 undefined   未定义的对象（还不存在的对象）----->null 3.  bool      true   false  4. string     5. number : 整型数字、浮点型的数字 <script> var names=['王X','李X','代X']; var random=Math.round(Math.random()*(names.length-1));//内置对象Math alert(names[random]); </script>    //数组对象 <script> var arr=['xiaoliang','xiaobai']; var arr2=new Array('xiaohua','xiaodai');         //关联数组 var arr3=new Array(); arr3['name']= 'xiaoyang'; arr3['age']='21'; for(var i=0; i<arr.length;i++){ //alert(arr[i]); }           //关联数组遍历 for(var i in arr3){ alert(arr3[i]); } </script>              json ------> javascript object notation : javascript 对象表示法         var arr2={‘name’:’xiaohei’};   //日期 对象Date    <script> function getDate(){ var myDate=new Date(); var year=myDate.getFullYear(); var month=myDate.getMonth()+1; var day=myDate.getDate(); var hour=myDate.getHours(); var minute=myDate.getMinutes(); var second=myDate.getSeconds(); document.getElementById('p1').innerHTML=year+'年'+month+'月'+day+'日'+hour+'时'+minute+'分'+second+'秒'; } setInterval('getDate()',1000);// 间隔，每隔几秒就掉一用一次函数   无限的执行          时间参数 1000微妙=1秒 </script> <p id="p1"></p> 3. DOM、事件 DOM: Document Object Model --------> 文档对象模型： 把HTML网页看作是一个文档，把html文档，转换成javascript可以操作的对象 通过DOM把htmnl文档里面不同的元素，造出不同的javascript的对象 创建元素对象：    createElement    删除元素对象： 父元素.removeChild()    修改元素内容： innerHTML 设置元素的内容----------> <p></p> <div></div> setAttribute()                     <img> <a> <input> 查询元素对象：      1.document.getElementById(‘id值’) 网页换肤      2.document.getElementsByName(“元素名称”) 一般情况下，我们用于表单，（考虑到浏览器的兼容性），只对有默认name属性的表单元素有作用     3.document.getElementsByTagName(“标签名”) 隔行换色   事件：     一般事件： onload onfocus onblur onchange    鼠标事件： onclick onmouseover onmouseout onmousemove:  屏幕 event  screenX   screenY      客户端clientX   clienY  键盘事件： onkeydown:    event.keyCode   event内建对象  keyCode对应的键值 onkeyup   setInterval()  间隔，每隔几秒就掉一用一次函数   无限的执行 setTimeout()  多少秒之后触发一次这个函数 每次执行一次   DOM的增删改查： 1. 增加DOM节点        createElement() 创建一个元素，参数就是元素名        1. 可以给这个元素创建文本 （div,p）           createTextNode()         var text=document.createTextNode('我的段落');         2. 设置属性（input, img,a）           setAttribute()  设置属性，实现效果                 img.setAttribute('src','1.jpg'); img.setAttribute('width','100'); img.setAttribute('height','200');           3. 将创建的这个元素，给他一个组织（归属） 通过父节点（父元素）追加他为子元素                    p.appendChild(text); div.appendChild(p); div.appendChild(input); div.appendChild(img);   <script> var div=document.getElementById("skin"); var p=document.createElement('p'); var input =document.createElement('input'); input.setAttribute('type','button'); input.setAttribute('value','按钮'); var text=document.createTextNode('我的段落'); var img=document.createElement('img'); img.setAttribute('src','1.jpg'); img.setAttribute('width','100'); img.setAttribute('height','200'); p.appendChild(text); div.appendChild(p); div.appendChild(input); div.appendChild(img); </script> 隔行换色： function changeColor(){ var trs=document.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++){ if(i%2==0){ //trs[i].style.backgroundColor='red'; trs[i].οnmοuseοver=function(){ this.style.backgroundColor='red'; } trs[i].οnmοuseοut=function(){ this.style.backgroundColor=''; } }else{                                                                     //trs[i].style.backgroundColor='green'; trs[i].οnmοuseοver=function(){ this.style.backgroundColor='green'; } trs[i].οnmοuseοut=function(){ this.style.backgroundColor=''; } } } }   统计文本域输入文字字数： <textarea id="text" cols="30" maxlength="5" rows="6" οnkeyup="count()"></textarea> <p id="p1"></p> <script> function count(){ var text =document.getElementById("text"); document.getElementById('p1').innerHTML='您已输入'+text.value.length+'个文字'; } </script> 鼠标移动事件： <divstyle="width:300px;height:300px;background-color:red" mouseover="changeWhite()" οnmοuseοut="changeGreen()"></div> <script>            var div=document.getElementsByTagName("div"); function changeWhite(){ div[0].style.backgroundColor='white'; } function changeGreen(){ div[0].style.backgroundColor='green'; } </script>   4.Ajax aschronomos  javascript and XML，异步通信技术 ajax，其实就是javascript 通过自己的一个对象，和服务器进行交互的一种技术   javascript的那个对象 不同的浏览器获得的方式 获得的方式不一样： 如果浏览器是火狐一伙的，使用 XMLHttpRequest()这个函数获得 如果浏览器是IE一伙的，使用 new ActiveXObject(“Microsoft.XMLHTTP”)  如果以get方式请求的话，如果表单的内容没有发生变化，并没有真的发送请求，而是读取的是缓存的内容，解决问题： get请求的时候，给地址栏一个随机数，表示请求的不再是原来的地址，类似于 验证码 var url = "index.php?c=user&a=validate&user="+username+"&time="+new Date(); 特别注意:如果以post方式提交的话,下面这句话必须要写 myxhr.setRequestHeader("Content-Type",'application/x-www-form-urlencoded');   <?php        class userController extends baseController{ public function listAction(){ $this->smarty->display('user/check.tpl'); } public function validateAction(){ //echo 'hello'; $name = $_GET['user']; //命令模型层查询数据 $model = new userModel(); $result = $model -> getByName($name); //命令视图层显示数据 //$this->smarty->assign('res',$result); if($result==1){ echo "<font color='red'>用户名已存在</font>"; }else{ echo "<font color='green'>用户名不存在</font>"; }   //$this->smarty->display('user/check.tpl'); } public function formAction(){ $this->smarty->display('user/form.tpl'); } public function checkAction(){ $name=$_POST['user']; $model = new userModel(); $result = $model -> getByName($name); if($result==1){ echo "<font color='red'>用户名已存在</font>"; }else{ echo "<font color='green'>用户名不存在</font>"; } } } <?php class userModel extends baseModel{ public function getByName($name){  $sql = "select * from user where username='$name'";  return $this->getOne($sql); } } 用户名:<input type='text' name='username' id="username"/> <input type='button' value="验证" οnclick="check()"/><span id='span'></span>   <script>   function getXHR(){ if(window.ActiveXObject){ var xhr=new ActiveXObject("Microsoft.XMLHTTP"); }else{ var xhr=new XMLHttpRequest(); } return xhr; } functioncheck(){ //通过xhr这个对象访问服务器 var xhr=getXHR(); var username=document.getElementById("username").value; //alert(xhr); var url="index.php?c=user&a=validate&user="+username+"&time="+new Date(); xhr.open("GET",url,true); //如果用POST方式usename得写send里边 xhr.send(null);//get方式 xhr.onreadystatechange = function(){ //只需要关注请求成功的这个状态 if(xhr.readyState==4){ //获得php返回的结果 /* alert(xhr.responseText); if(xhr.responseText==1){  alert('用户名已存在'); }else{ alert('用户名不存在'); } */   document.getElementById("span").innerHTML = xhr.responseText; } } } </script>   作用域：<script>     /*函数的作用域链： 　　 1.函数的作用域链，从最低级向上一级查找的过程     */        var v='global';    function f(){ //alert(v);    }    f();  /*2.如果函数范围内，声明了一个变量，就会使用局部范围的，就不再向上一级查找，    但是由于javascript的代码是从上往下执行的，所以执行到alert(v) 还没有给v这个变量赋值，所以输出undefined    */ var v = 'global'; function f1(){ alert(v);//undefined var v = 'function'; //alert(v);//function } f1(); </script>   通过这个对象的方法去请求php文件：，请求的话，至少需要知道 请求的地址，以及请求的方式： 1. open() 相当于打开一个浏览器，输入地址 第一个参数，请求的方式： 第二个参数，请求的地址： 第三个参数，布尔值， true  false    true： 异步请求：   javascript 请求服务器、服务器查询，javascript继续执行，查询之后把结果给javascript 即可 false：非异步请求，速度慢 xhr.open("GET",url,true);     2. 发送数据：    xhr.send()  如果以get方式发送，需要在地址栏传递参数：    send（）的参数为空