

Ajax介绍,使用的语言,要注意的问题,应用实例,检测用户名,提交文章,不刷新页面添加分类
24.1 了解AJAX
1) Ajax,全称Asynchronous JavaScript And XML,并非新的语言,它是JavaScript,XML,CSS,DOM等多种已有技术的组合
2) 由Jesse James Carrett创造,是目前最流行的技术,极大的发掘了浏览器潜力,改善用户的Web应用体验,开启大量新的可能性
3) 可实现客户端异步请求操作,即不刷新页面情况下与服务器通信,减少用户等待时间
24.2 AJAX使用的技术
JavaScript脚本语言,解释型脚本语言,面向对象的,丰富的
XMLHttpRequest对象,能用超文件连接服务器,微软的,不用刷新与服务器交换数据,使用前要初始化
XML语言,可扩展标记语言
DOM,实地修改用户界面
CSS
24.3 Ajax开发需要注意的几个问题
1) 浏览器兼容性,XMLHttpRequest对象封装,
2) 性能问题,核心语言JS代码本身不是高性能的,注意优化for循环
3) 中文编码问题
Ajax不支持多种字符集,默认字符集是UTF-8,注意转换编码,
PHP发送中文,Ajax接收在顶部加如下语句,header('Content-type:text/html;charset=GB2312'); //指定发送数据的编码格式
Ajax发送,PHP接收转码比较复杂,先在Ajax中用encodeURIComponent对要提交的中文进行编码。
还需要在PHP中添加如下代码:$GB2312string=iconv('UTF-8','gb2312//IGNORE',$RequestAjaxString);
PHP选择MySQL数据库时用如下语句设置数据库编码类型:mysql_query("set names gb2312");
24.4 在PHP中应用AJAX技术的典型应用
1. 在PHP中用AJAX技术检测用户名
以下几段代码的作用是当点检测用户名超链接,通过JS提交到一个PHP页面去查询数据库
代码段1:<a href="#" onClick="checkName();">[检测用户名]</a>
代码段2:
function checkName() {
var username = form1.username.value;
if(username=="") {
windows.alert("请填写用户名!");
form1.username.focus();
return false;
}else {
createRequest('checkname.php?username='+username+'&nocache='+new Date().getTime());
}
}
代码段3:checkname.php页面代码
$link=mysql_connect("localhost","root","root");
mysql_select_db("db_database24",$link);
$GB2312string=iconv('UTF-8' , 'gb2312//IGNORE' , $RequestAjaxString);
//Ajax中先用encodeURIComponent对要提交的中文进行编码
mysql_query("set names gb2312");
$username=$_GET[username];
$sql=mysql_query("select * from tb_user where name='".$username."'");
header('Content-type:text/html;charset=GB2312'); //指定发送数据的编码格式为GB2312
if ($info) {
echo "很报歉!用户名[".$username."]已经被注册!";
}else{
echo "祝贺您!用户名[".$username."]没有被注册!";
}
2. 在PHP中应用AJAX技术发表博客文章
代码段1:点add.gif图标用其onClick事件提交到JS函数
<img src="images/add.gif" width="67" height="23" onClick="checksort();">
代码段2:
function checksort() {
var txt_sort = form1.txt_sort.value;
if(txt_sort=="") {
window.alert("请填写文章类别!");
form1.txt_sort.focus();
return.false;
}else{
createRequest('checksort.php?txt_sort='+txt_sort);
}
}
代码段3:
function alertContents() { //处理服务器返回的信息
if (http_request.readystate == 4) {
if (http_request.status == 200) {
sort_id.innerHTML=http_request.responseText; //设置sort_id HTML文本替换的元素内容
}else {
alert('您请求的页面发现错误');
}
}
}
代码段4:checksort.php页代码
$link=mysql_connect("localhost","root","root");
mysql_select_db("db_database24",$link);
$GB2312string=iconv('UTF-8' , 'gb2312//IGNORE' , $RequestAjaxString);
//Ajax中先用encodeURIComponent对要提交的中文进行编码
mysql_query("set names gb2312");
$sql=mysql_query("select distinct * from tb_sort group by sort");
$rsult=mysql_fetch_object($sql);
do{
header('Content-type: text/html;charset=GB2312');
段5:
}while($result=mysql_fetch_object($sql));
段6:checksort.php页代码
$link=mysql_connect("localhost","root","root");
mysql_select_db("db_database24",$link);
$GB2312string=iconv('UTF-8' , 'gb2312//IGNORE' , $RequestAjaxString);
//Ajax中先用encodeURIComponent对要提交的中文进行编码
mysql_query("set names gb2312");
$sort=$_GET[txt_sort];
mysql_query("insert into tb_sort(sort) values('$sort')");
header('Content-type: text/html;charset=GB2312'); //指定发送数据的编码格式为GB2312