Ajax入门笔记

来源：互联网发布：石全石美软件破解版编辑：程序博客网时间：2024/05/21 08:03

Ajax 帮你实时更新网页游戏数据

作者：瓦间草邮箱：657917230@qq.com
Ajax原理演示动画

多说无益，快看案例（最重要）

需要创建两个文档：一个主文档，一个对数据库操作的php文档。
这里写图片描述
新建一个名称为index.html的主文档，把下面代码粘贴进去。

<html><head><meta charset="utf-8"><script type="text/javascript"  >    function MyFirstAjax()    {        var ccc;//设个通讯变量        //把送回来的文字更新给bbb,   responseText是关键字。        document.getElementById("bbb").innerHTML=ccc.responseText;        ccc.open("GET","aaa.php",true);//即将做的事是：打开并运行aaa文件，并要回结果。        ccc.send();//现在开始干活    }</script></head><body>//bbb在这里<h2><div id="bbb">这是一段文字，一会将被改变</div></h2>//只要点击按钮，就会更新<button type="button" onClick="MyFirstAjax()">点我改变内容</button></body></html>

然后我们来看一下aaa.php文件是怎么写的
新建一个名称为aaa.php的文件，双击打开后，把下面四行代码粘贴进去：

<meta charset="utf-8"><?phpecho "666！我曹，你真帅！";?>

在点击按钮后会更新为这句话：666！我曹，你真帅！
我怕浏览器识别不了汉字所以加了“utf-8”编码。
现在把两个文件放在一起，用阿帕奇运行一下，在火狐浏览器中输入IP，

这里写图片描述

点击按钮后，看到发生了变化：

这里写图片描述

当然，你可能会有乱码，服务器不通等情况，如果你感兴趣
可以继续往下看，下面的代码，逐一帮你解决这些问题：

知识点扩展——代码兼容性补充

新建一个名称为index.html的主文档，把下面代码粘贴进去。

<html><head><meta charset="utf-8"><script type="text/javascript"  >function MyFirstAjax(){//----先整一个变量tmd用来接收PHP送来值的。    var ccc;//==============================================//----非重点，兼容性设置,固定用法，理解就行，死记硬背，不要修改，习惯性略过即可---------    if (window.XMLHttpRequest)      {// 让你的代码支持 IE7+, Firefox, Chrome, Opera, Safari浏览器      ccc=new XMLHttpRequest();      }    else      {// 否则，让你的代码支持 IE6, IE5浏览器      ccc=new ActiveXObject("Microsoft.XMLHTTP");      }//==============================================//==============================================//----如果兼容性通过，则运行下面的function方法。onreadystatechange固定用法    ccc.onreadystatechange=function()      {        //-----------------如果加载完成-----------------        //----4代表交互完成，200代表后台正常交互完成时返回的一个状态码。      //扩展：404表示文件未找到，500是内部服务器出错。      if (ccc.readyState==4 && ccc.status==200)        {      //-----------------如果加载完成-----------------        //文档中选择ID为“bbb”的元素并写入文本 = 回传的字符        //responseText 是关键字，固定用法，意思是得到的字符        //innerHTML 是关键字，js语言当中往页面里写字。    document.getElementById("bbb").innerHTML=ccc.responseText;        }      }    //ccc即将执行方案如下（使用“GET方式”打开“aaa.php”文件，“允许”异步）    ccc.open("GET","aaa.php",true);    //ccc，开始执行    ccc.send();}//GET方式和POST方式两种。区别如下：//GET是收音机，用户单方面被动接受。反应快，特点：易受缓存干扰，无法与非标字码的火星人沟通。//POST是对讲机，用户送出去啥，服务器回复啥，送、回，送、回。特点：反应慢，能克服缓存问题，文字载弹量大，能准确识别用户的火星文。</script></head><body>//这里是我们的bbb元素<h2><div id="bbb">这是一段文字，一会将被改变</div></h2>//当点击按钮，执行一个click事件，运行MyFirstAjax（）<button type="button" onClick="MyFirstAjax()">点我改变内容</button></body></html>

然后将index.html和aaa.php文件放入服务器运行，登录IP即可使用多种浏览器观看效果。

实际上你不止可以使用php文件，txt文件以及其他文件也是可以的。

简单介绍

Ajax实际上是一种语法或者编码方案，并不是某个插件，也不是某个需要嵌入的脚本文件。它主要是用javascript语言编写的，你可以理解为，按照这个思路写JavaScript脚本，就叫ajax，读作“阿贾克斯”。

解释

Javascript语言

能够实时更新网页页面，很方便。
但是JavaScript并不能够直接访问mysql数据库，只能通过“召唤”，调用专门的数据库脚本，相互间传值，来间接实现。例如使用PHP或者JAVA来帮忙。
JavaScript是在html网页里面，只要用户开启火狐浏览器，点击键盘的F12键，即可看到赤裸裸的JavaScript源代码。然后用户只要稍加改动金币数量，游戏就被修改了。所以根本就不安全。

php语言

php能够操作mysql数据库但是并不能实时更新页面的某个局部
php是服务器语言，你可以理解为“菜谱”或者“炒菜方案”。把一段php菜谱给厨师（网站服务软件Apache），Apache就按照这段方案干活了。接着Apache做出一道菜（html页面），然后把菜（html页面）传送给用户看，用户永远看不到炒菜的过程，毕竟数据库账号密码等绝技都明码写在php文件里面。另外，菜端出了厨房，厨师就不管了。

所以利用JavaScript的实时更新特点和php访问数据库的特点，两者一结合，被人起了一个名字“ajax”。

参考资料
runoob网站
http://www.runoob.com/ajax/ajax-intro.html
W3School
http://www.w3school.com.cn/ajax/index.asp

感谢以上组织和工程技术人员的教学分享

阅读全文

1 0