javascript、ajax基础

原创 于 2013-12-15 20:47:54 发布 · 607 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了MVC框架的基本概念及实现方式，包括初始化过程、控制器处理机制等，并深入探讨了JavaScript基础知识、DOM操作及Ajax技术的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

内

容

本周学习知识点：

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].onmouseover=function(){

this.style.backgroundColor='red';

}

trs[i].onmouseout=function(){

this.style.backgroundColor='';

}

}else{                                                                    

//trs[i].style.backgroundColor='green';

trs[i].onmouseover=function(){

this.style.backgroundColor='green';

}

trs[i].onmouseout=function(){

this.style.backgroundColor='';

}

}

}

}

 

统计文本域输入文字字数：

<textarea id="text" cols="30" maxlength="5" rows="6" onkeyup="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()" onmouseout="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="验证" onclick="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（）的参数为空

DreamToSetSail
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值