Ajax 解释Ajax的XML和JSON格式，操作Ajax的几种封装方法【案例+解释】（二）

相比较xml格式，体积小，传输快，解析方便。

例如：

{

“student”:[

{

“name”:“张三”,

“age”:“19”,

“sex”:“男”

},

{

“name”:“李四”,

“age”:“23”,

“sex”:“女”

},

{

“name”:“王五”,

“age”:“12”,

“sex”:“男”

}

]

}

这里说一下eval函数，evaluate意思评估。

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

var obj = eval (“(” + txt + “)”);

在网页中使用 JavaScript 对象：

var txt = ‘{ “sites” : [’ +

‘{ “name”:“菜鸟教程” , “url”:“www.djznrobot.com” },’ +

‘{ “name”:“google” , “url”:“www.djznrobot.com” },’ +

‘{ “name”:“微博” , “url”:“www.djznrobot.com” } ]}’;

var obj = eval (“(” + txt + “)”);

document.getElementById(“name”).innerHTML=obj.sites[0].name

document.getElementById(“url”).innerHTML=obj.sites[0].url

3.如何处理XML数据格式案例

---

注意：在php文件中，xml代码和php代码中间一定不要有多余的换行，否则不能执行！！！

写一个案例，创建一个booklist.html文件：

书籍列表案例

书名 作者 描述

再在server下创建一个getBooks.php文件：

<?php //这里设置响应头信息，保证浏览器可以把相应内容识别为xml文件类型。 header("Content-Type:text/xml;"); $arr = array(); $arr[0] = array("name"=>"三国演义","author"=>"罗贯中","desc"=>"一个杀戮的时代！"); $arr[1] = array("name"=>"水浒传","author"=>"施耐庵","desc"=>"108条好汉的故事。"); $arr[2] = array("name"=>"西游记","author"=>"吴承恩","desc"=>"佛教与道教的斗争。"); $arr[3] = array("name"=>"红楼梦","author"=>"曹雪芹","desc"=>"一个封建王朝的缩影。");?> <?xml version="1.0" encoding="utf-8" ?> <?php foreach ($arr as $key => $value) { ?>

<?php echo $value['name'] ?>

<?php echo $value['author'] ?>

<?php echo $value['desc'] ?>

<?php } ?>

结果如下：

4.如何处理JSON数据格式案例

---

注意：除了XML格式，其他的都是用responseText方法，responseText方法获得字符串形式的响应数据。。

3.Ajax的封装

======================================================================

将Ajax的四个操作步骤封装在一个函数当中，通过调用函数来实现Ajax调用。

下面我们就在之前的register.html，进行修改，建立一个myAjax的函数，来进行封装：

注册界面

用户名：

邮箱：

手机号码：

上面的myAjax()函数方法就是封装后的。不要忘记之前的三个php后台文件。

4.Ajax使用对象和外部JS文件

==============================================================================

创建一个myutils.js文件，将封装起来的Ajax存入到里面：

里面通过使用对象解决了参数的顺序问题。

function myAjax2(obj){

//使用对象来解决参数的顺序问题。

//data就是要传递的参数，也就是之前的params，这里写成了对象的形式。

//这里的参数形式差不多为，uname=zhangsan&age=18

var defaults = {

type:“get”,

url:“#”,

dataType:“json”,

data:{},

async:true,

success:function(result){

console.log(result);

}

};

//将obj的属性，覆盖到defaults中的属性。

//既可以设置了默认值，又可以传递属性的值，一举两得。

for(var key in obj){

defaults[key] = obj[key];

}

var xhr = null;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}else{

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

}

// data = {

// uname:“zhangsan”,

// age:18

// }

// 参数形式差不多为，uname=zhangsan&age=18

// 按照上面的格式来写出params。

var params = “”;

for(var attr in defaults.data){

params += attr + “=” + defaults.data[attr]+“&”;

}

if (params) {

params = params.substring(0,params.length-1);

}

if (defaults.type == “get”) {

defaults.url += “?” + params;

}

xhr.open(defaults.type,defaults.url,defaults.async);

if (defaults.type == “get”) {

xhr.send(null);

}else if (defaults.type == “post”) {

xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);

xhr.send(params);

}

if (defaults.async) {

xhr.onreadystatechange = function(){

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

if (defaults.dataType == “json”) {

result = xhr.responseText;

result = JSON.parse(result);

}else if (defaults.dataType == “xml”) {

result = xhr.responseXML;

}else{

result = xhr.responseText;

}

defaults.success(result);

}

}

}else{

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

if (defaults.dataType == “json”) {

result = xhr.responseText;

result = JSON.parse(result);

}else if (defaults.dataType == “xml”) {

result = xhr.responseXML;

}else{

result = xhr.responseText;

}

defaults.success(result);

}

}

}

修改之前的register.html，并导入上面的myutils.js，如下：