PHP Ajax 入门HelloWorld

　　浅谈Ajax

　　Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。

　　它由 HTML+JS+DOM组成，本教程暂时不涉及DOM。

　　同步的概念：页面提交POST表单，是不是整个页面都在等待服务器返回(呈空白状态)，然后刷新?没错，这就是同步。

　　异步的概念：表单提交后，页面的其它部分照常用。

　　Ajax 就是页面和服务器之间的小三，作为一段JS代码，它把页面的提交信息截获，然后处理后提交给服务器，然后监听服务器返回信息，然后再回馈给页面。

　　要用它需要一个句柄：xmlHttp = new XMLHttpRequest();

　　我们正是基于这个对象扮演小三这个角色。

　　参照下注释就能理解ajax流程：

　　1.生成XMLHttpRequest对象

　　2.建立要跳转的URL

　　3.打开服务器conn

　　4,.设置服务器完成操作后要执行的函数

　　5.send ajax

　　6.结束后待执行函数要不断监听(机制不需要我们实现)

　　哎，从圣马家沟男子职业技术学院出来的我，没啥文化，以上就是自己粗浅的理解。

　　要看高大上的：掌握 Ajax，第 1 部分: Ajax 入门简介

　　实际操作

　　在wamp/www/中新建一个testAjax文件夹，里面两个文件：index.html 和 getZipcode.php

　　index.html

　　?

　　

　　

　　

　　

　　

　　

　　

　　

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　12

　　13

　　14

　　15

　　16

　　17

　　18

　　19

　　20

　　21

　　22

　　23

　　24

　　25

　　26

　　27

　　28

　　29

　　30

　　31

　　32

　　33

　　34

　　35

　　36

　　37

　　38

　　39

　　40

　　41

　　42

　　43

　　

　　<title>

　　Test ajax in <a href="http://www.2cto.com/kf/web/php/" target="_blank" class="keylink">PHP</a>...

　　</title>

　　<script language="javascript" type="text/javascript">

　　//创建一个XMLHttpRequest句柄

　　var xmlHttp = false;

　　if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {

　　 xmlHttp = new XMLHttpRequest();

　　}

　　function callServer(){

　　    //截获表单 get value

　　    var city = document.getElementById("city").value;

　　    if(city == null || city == "") return;

　　    //建立URL，获取邮政编码

　　    var url = "/testAjax/getZipcode.php?city="+escape(city);

　　    //打开conn,true表示异步

　　    xmlHttp.open("GET",url,true);

　　    //设定完成代码后执行的函数

　　    xmlHttp.onreadystatechange = updatePage;

　　    //发送Ajax，因为是GET方式，不需要附带数据

　　    xmlHttp.send(null);

　　}

　　//这个方法监听和处理响应

　　function updatePage(){

　　    //什么也不要做，直到 xmlHttp.readyState 属性的值等于 4

　　    if(xmlHttp.readyState == 4){

　　        var response = xmlHttp.responseText;

　　        document.getElementById("zipcode").value = response;

　　    }

　　}

　　</script>

　　<form>

　　    <p>City: <input type="text" name="city" id="city" size="25" onchange="callServer();"></p>

　　    <p>Zip Code: <input type="text" name="zipcode" id="zipcode" size="5"></p>

　　

　　</form>

　　

　　getZipcode.php

　　?

　　

　　

　　

　　

　　

　　

　　

　　

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　12

　　

";

　　    }else{

　　        $city = $_GET["city"];

　　        if($city != null && $city != ""){

　　            echo $city."_010";

　　        }else{

　　            echo "city is null?";

　　        }

　　    }

　　?>

　　实际结果：

　　无论我的City输入什么，下面的邮政编码，都会加一个“_010”，实时的。

　　吐槽：zipcode是邮政编码的意思(英语都是体育老师教的)。

分享到：