html,javascript,php混在一起使用

3 年前

草头黄

天空大地

html

javascript

php

综合应用。

做一道豆腐，需要豆腐，大蒜，辣椒，油，盐，锅，煤气。。。

每一样参与者，都有他的作用。

做web一样，也有很多的参与者，他们各自发挥不同的作用。

那他们混在一起是怎么彼此作用的呢？

下面是html代码，来自参考网站。

html代码里面，嵌入了一个clientHint.js

这个是javascript代码文件

clientHint.js代码什么时候执行呢？

里面是什么内容呢？稍后。

html产生的内容，是用户可以直接用浏览器看到的静态的内容。

里面有一个form表单。

这个表单，是用户输入信息的。

用户在一个输入框里面输入信息。

当用户输入信息完成之后，(这个是一个事件)

触发一个函数

onkeyup="函数"

函数：showHint(this.value)

这个函数的定义是哪里呢？

从哪里冒出来的呢？

函数的定义，在前面嵌入的clientHint.js代码里面。

以前写的form，填写表单之后，

会有一个submit提交按钮。

会有一个action跳转到某个页面。

这里，看不到这两样。

html里面还有p

还有span

p和span的作用，就是显示文字内容的。

<html>
<script src="clientHint.js"></script> 
</head>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

接下来看看clienthint.js

var是声明一个变量xmlHttp

function是声明一个函数,这里可以找到html里面的showHint函数的定义。

而且这个函数后面有一个str，表示此函数接收一个传入的参数。

进入函数里面，

if(str.length==0)

str.length是计算这个字符串的长度

==是比较运算

如果字符串长度是0，

document.getElementById("txtHint").innerHTML=""

这个是啥意思？

在html里面，有

所以，在js里面，

document.getElementById("txtHint")

代表通过id，找到标签span

然后指定span的innerHTML属性，

也就是让他显示一些内容。

如果长度是0，就不显示。

js就控制了网页的行为。

如果用户输入了字符串：也就是字符串长度非零。

xmlHttp=GetXmlHttpObject()

函数showHint里面调用了一个函数GetXmlHttpObject

函数返回结果赋值给xmlHttp

问题：GetXmlHttpObject函数是什么呢？

这个函数的定义是什么呢？

函数在被调用的时候，都要去看一下函数定义是什么，这样才知道函数在做什么。

在showHint函数的外面，找到了函数GetXmlHttpObject定义。

函数声明了一个变量

var xmlHttp，初始化为null

接下来是一个try语句

try就是试一试，试一试这样来初始化对象。

xmlhttp=new XMLHttpRequest()

如果试一试不成功，

就再试一试

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

如果试一试不成功，就再试一试

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

try

{

}

catch(e)

{

try

{}

catch(e)

{}

}

然后函数返回xmlhttp

看完了调用的函数长什么样子，现在回到showHint函数里面。

如果xmlhttp是null,

给一个提示框，浏览器不支持

退出。

如果xmlhttp不是null,

声明一个url变量

赋值为gethint.php

注意：这样在js代码里面就和php发生了关系。

要注意是怎么建立这种关系的。

在html里面，通过script标签，建立和js代码的关系。

在js代码里面，通过document.getElementById，建立和html的关系。

在js代码里面，通过变量url建立和php关系。

url=gethint.php?q=str&sid=Math.random()

这个url是什么意思呢？

?前面，是一个php页面

?后面，是传递到php页面的参数，一个是q,他的值是字符串

一个是sid，他的值是随机数字

总共2个参数。

下面几句是对象点操作。

xmlHttp.onreadystatechange=stateChanged

xmlHttp对象

更新，怎么更新，查看函数stateChanged

通过判断readystate属性，如果满足条件，就更新，

更新的结果，就是改变html内容。

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

把xmlHttp接收的内容赋值给html上的span标签。

下一句是打开，下一句是send

xmlHttp.open()函数里面，传入了url,url里面有php

这样就和php发生了联系。

Get,url,true

Get是一种传数据的method

url,里面包含了php和2个参数

然后是发送。

现在要看一下什么呢？

看一下发送以后，php方面做了什么事。

var xmlHttp
function showHint(str)
if (str.length==0)
  document.getElementById("txtHint").innerHTML=""
  return
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  alert ("Browser does not support HTTP Request")
  return
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
function stateChanged() 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
function GetXmlHttpObject()
var xmlHttp=null;
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
catch (e)
 // Internet Explorer
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 catch (e)
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;

php

<?php

是php的一种格式

代表里面的代码是php代码。

$a[]

表示一个数组

里面装了很多的元素

这里面就是很多个名字。

$_GET["q"]

前面提到，在js里面，构造了url,而且打开了url,发送了url

所以php里面，可以接收到参数。

q=str(这个在js里面已经说明了)

获得参数，赋值给$q

这个就是用户输入。

判断字符串长度，

如果字符串长度是大于零，

strlen($q)>0

声明一个变量，$hint

初始化为空

for($i=0; $i<count($a); $i++)

这个是遍历数组，从头开始查询数组。

count($a)是求数组的个数

$i是数组下标

当下标是0的时候：

strtolower($q)把用户输入变小写

if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))

substr是求子串。

有3个参数

第一个参数：表示数组a，下标是$i的元素。

第二个参数：位置0

第三个参数：表示用户输入字符串的长度

也就是，查询数组，看数组元素的子串，转为小写，和用户输入，转为小写，是否相等。

也就是说，数组里面的名字，如果包含用户输入。

包含：

abc包含a

abc包含ab

如果包含：

如果hint变量是空，就把名字赋值给hint

如果hint不是空，就把名字连接到hint上面。

这里面看懂了吗？

就是说，数组里面有很多的名字，

挨个查询，

如果用户输入是这名字的子串，那么就保存这个名字。

因为数组有很多名字，如果用户输入是数组里面很多名字的子串，保存的名字就多。(这时候hint做了一个连接)$hint=$hint." , ".$a[$i];

然后看hint

如果hint是空，response就是no suggestion

如果hint 不是空,response就是hint

然后把response输出来。

这样就是php对接收到的数据做了处理。

处理的结果，会在html里面显示。

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
$hint="";
for($i=0; $i<count($a); $i++)
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    if ($hint=="")
      $hint=$a[$i];
      $hint=$hint." , ".$a[$i];
//Set output to "no suggestion" if no hint were found
//or to the correct values
if ($hint == "")
$response="no suggestion";