Ajax学习的相关笔记，以便于自己查阅，巩固
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册页面</title>
<script type="text/javascript">
var xmlHttpRequest;
var myXmlRequest ="";
function getXmlHttpObject(){
if(window.ActiveObject){
xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest = new XMLHttpRequest();
}
return xmlHttpRequest;
}
function checkName(){
myXmlRequest = getXmlHttpObject();
if(myXmlRequest){
//new Date()去掉缓存的方法一
var url = "./registerProcess.php?mytime="+new Date()+"&username="+$("username").value;
myXmlRequest.open('get',url,true);
myXmlRequest.onreadystatechange = chuli;
myXmlRequest.send(null);
}
}
function chuli(){
if(myXmlRequest.readyState == 4){
//取出返回信息的格式
$('myres').value = myXmlRequest.responseText;
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="./registerProcess.php" method="post">
用户名 : <input type="text" name="username" id="username" />
<input type="button" name="button" value="验证用户名" onclick="checkName()" />
<input type="text" name="" id="myres" style="border-width:0;color:red">
<br>
用户密码: <input type="password" name="password" /><br>
电子邮件: <input type="text" name="email" /><br>
<input type="submit" value="用户注册" />
<br>
</form>
<form action="" method="post">
用户名 : <input type="text" name="username2" id="username2" />
<br>
用户密码: <input type="password" name="password" /><br>
电子邮件: <input type="text" name="email" /><br>
<input type="submit" value="用户注册" /><br>
</form>
</body>
</html>
ajax post 方式请求
笔记中的http_request 改成 myXmlHttpRequest
php里面的修改
ajax 如何处理返回数据xml格式的情况
ajax 如何处理返回数据json格式的情况
一.Json对象与Json字符串的转化
1.jQuery插件支持的转换方式：
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象
2.浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器：
JSON.stringify(obj)将JSON转为字符串。JSON.parse(string)将字符串转为JSON格式；
var a={"name":"tom","sex":"男","age":"24"};
var b='{"name":"Mike","sex":"女","age":"29"}'; //试用JSON.parse的方法，内部的数据必须都试用双引号
var aToStr=JSON.stringify(a);
var bToObj=JSON.parse(b);
alert(typeof(aToStr)); //string
alert(typeof(bToObj));//object
3.Javascript支持的转换方式：
eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。
4.JSON官方的转换方式：
http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；
可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
如何选择三种的数据个格式
Ajax 实现省市联动实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级城市省市联动</title>
</head>
<body>
<select id="one">
<option value="">--请选择--</option>
<option value="0">浙江省</option>
<option value="1">广东省</option>
<option value="2">福建省</option>
</select>
<select id="two">
<option value="">--请选择--</option>
</select>
<select id="three">
<option value="">--请选择--</option>
</select>
<script type="text/javascript">
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var city = [],city1 = [];
//定义二级数据
//
city[0] = ['杭州市','西湖市'];
city[1] = ['广州市'];
city[2] = ['厦门市'];
city1[0] = ['百度','谷歌'];
city1[1] = ['360','搜狗'];
one.onchange = function(m){
var m = one.value;
two.length = 0;
for(var i=0;i<city[m].length;i++){
var op = new Option(city[m][i],i);
two.add(op)
}
two.length = city[m].length;
}
two.onchange = function(m){
var m = two.value;
three.length = 0;
for(var i=0;i<city1[m].length;i++){
var op = new Option(city1[m][i],i);
three.add(op)
}
three.length = city1[m].length;
}
</script>
</body>
</html>