Ajax与JSON初接触

function getXmlHttpObject(){

var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest 对象方法不一样
if(window.ActiveXObject){

xmlHttpRequest=new ActiveXObject(“Microsoft.XMLHTTP”);

}else{

xmlHttpRequest=new XMLHttpRequest();
}

return xmlHttpRequest;

}

定义getXmlHttpObject()成为xhr对象,兼容ie低版本浏览器。

function getXmlHttpObject(){

return xmlHttpRequest=new XMLHttpRequest();

}

可简写为上述方式

var myXmlHttpRequest=””;  //定义为全局函数,方便chuli()这个函数进行调用

function checkName() {

myXmlHttpRequest=getXmlHttpObject();
if (myXmlHttpRequest) {
var url = “/ajax/registerProcess.php”
var data =”username=”+$(‘username’).value;
//准备请求
myXmlHttpRequest.open(“post”, url, true);
//还有一句post不可少的语句
myXmlHttpRequest.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
//处理回调函数
myXmlHttpRequest.onreadystatechange = chuli;
//发送请求 get时send(null)中间填null, post请求,写入实际的数据
myXmlHttpRequest.send(data);
}
}
//回调函数
function chuli() {

if (myXmlHttpRequest.readyState == 4) {
var mes =myXmlHttpRequest.responseText;
var mes_obj=eval(“(“+mes+”)”);
$(‘myres’).value=mes_obj.res;
}
}

//将选择id弄得简单一点。
function $(id) {
return document.getElementById(id);
}

/*”/ajax/registerProcess.php  内容如下*/

<?php

//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header(“Content-Type: text/html;charset=utf-8”);
//告诉浏览器不要缓存数据
header(“Cache-Control: no-cache”);

//接收数据(post get要和请求方式对应)
$username=$_POST[‘username’];
$info=””;
if($username==”123″){
$info='{“res”:”该用户不可用”,
“id”:”123564″,
“year”:”4657″ }’;
}else{
$info='{“res”:”可用”}’;
}
echo $info;

?>

//设置返回给浏览器的数据。现阶段的理解是,应当后端将数据格式交给前端一个demo,前端进行针对性的处理,以满足前端页面的使用。

JSON规则

JSON的规则很简单:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’对”之间使用“,”(逗号)分隔。 规则如下:

1)映射用冒号(“:”)表示。名称:值

2)并列的数据之间用逗号(“,”)分隔。名称1:值1,名称2:值2    //一层

3) 映射的集合(对象)用大括号(“{}”)表示。{名称1:值1,名称2:值2}   //二层

4) 并列数据的集合(数组)用方括号(“[]”)表示。 [ {名称1:值,名称2:值2}, {名称1:值,名称2:值2} ]    //三层

5) 元素值可具有的类型:string, number, object, array, true, false, null

JSON格式化例子

var people ={

“programmers”:

[

{ “firstName”: “Brett”, “email”: “brett@newInstance.com” },

{ “firstName”: “Jason”, “email”: “jason@servlets.com” },

{ “firstName”: “Elliotte”, “lastName”:”Harold”, “email”: “elharo@macfaq.com” }

],

“authors”:

 [

{ “firstName”: “Isaac”, “genre”: “science fiction” },

{ “firstName”: “Tad”, “genre”: “fantasy” },

{ “firstName”: “Frank”, “genre”: “christian fiction” }

],

“musicians”:

[

{ “firstName”: “Eric”, “instrument”: “guitar” },

{ “firstName”: “Sergei”, “instrument”: “piano” }

]

};

window.alert(people.programmers[1].firstName);   //返回Jason

window.alert(people.musicians[1].instrument);      //返回piano

理解:进行多层嵌套,现在还没有接触过数据库,不太清楚数据库内部是怎么储存数据的,也有JSON的数据库 ,对于数据的储存尚有疑问。

ajax核心简化部分



function xhr() {

return new XMLHttpRequest();
}
var myxhr = ""

function change() {

myxhr = xhr();
if (myxhr) {
var url = "/gold/index.php";
var data = "city[]=ny&city[]=bj&city[]=sh";
myxhr.open("post", url, true);
myxhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
myxhr.onreadystatechange = chuli;
myxhr.send(data);

}
}
function chuli() {

if (myxhr.readyState == 4 && myxhr.status == 200) {

var res_objects = eval("(" + myxhr.responseText + ")");


 

Javascript 访问JSON  


<script type="text/javascript">

var j={
identifier:"id1",
label:"id2",
items:[
{
id:"userConfig",
title:"用户配置",
class:"leftMenuItem",
url:"/dojo/show_user.jsp"
},
{
id:"roleConfig",
class:"leftMenuItem",
title:"角色配置",
url:"/dojo/show_role.jsp"
},
{
id:"permissionConfig",
class:"leftMenuItem",
title:"权限配置",
url:"/dojo/show_permission.jsp"
}
]
}

console.log(j["identifier"]); //id1
console.log(j["items"][0].id); //userConfig

</script>

&nbsp;

 

 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注