Ajax.docx
- 文档编号:7208473
- 上传时间:2023-05-11
- 格式:DOCX
- 页数:12
- 大小:250.61KB
Ajax.docx
《Ajax.docx》由会员分享,可在线阅读,更多相关《Ajax.docx(12页珍藏版)》请在冰点文库上搜索。
Ajax
Ajax
一、利用xml实现数据传输
1、为什么xml
ajax:
xxml
用户名是否可用1/0
返回两个数的和400
登录是否成功true/false
数据插是否成功true/false
需要服务器端返回少量的、单一的数据
如果我们需要从服务器端返回大量、复杂的数据,如何实现?
xml:
服务器端返回xml数据
json:
服务器端返回json数据
2、格式:
1)php解析xml
●$dom=newDOMDocument();
●$dom->loadXML($str);
●$nd=$dom->getElementsByTagName(“TagName”);
●$value=$nd->item(0)->nodeValue
●$xml=simplexml_load_string($str);
●$first=$xml->first;
●$second=$xml->second;
2)js解析xml
●varxml=xmlHttp.responseXML;
●node=xml.getElementsByTagName(“TagName”);
●node[0].childNodes[0].nodeValue;
3、案例1:
实现两个数的四则运算
php代码:
得到结果后,需要使用字符串连接成一个xml格式的字符串,如:
需要一个根元素,下面子元素,最后是具体的值,连接时也可以使用<< 输出这个字符串,默认的响应内容类型: text/html,也就是说客户端仍把代码当做html来进行解析,ajax对象的responeXML是不能得到一个xmldom对象,必须设置响应头类型为: text/xml; html代码: varxml=xhr.responseXML;得到ajax返回的xmldom对象 xml.getElementsByTagName(‘jia’)[0]: 是表示获取jia这个元素 xml.getElementsByTagName(‘jia’)[0].childNodes: 表示获取jia元素下的所有子节点 xml.getElementsByTagName(‘jia’)[0].childNodes[0]: 表示获取jia元素下的唯一文本节点 xml.getElementsByTagName(‘jia’)[0].childNodes[0].nodeValue: 文本节点的值 4、案例2 在页面加载之后,将goods表中所有数据显示在表格中 php代码: 查询goods表中所有数据 连接xml格式的字符串 表中有多少条数据 xml字符串就有几对goods标签 其中,name字段出现中文,所以需要进行转码gb2312--utf-8 最后,输出xml字符串 html代码: 创建行元素, 创建单元素格元素 将单元格元素追加到行元素中 将行元素追加到表格元素中 运行结果: 二、利用json传输数据 1、为什么? xml数据生成过于复杂 xml数据解析过于复杂 2、关于json介绍 对象是属性的无序集合 在js中,可以使用{}模拟这个集合 语法: varjson={属性: 属性值,属性: 属性值} 3、用json个表示具体的信息 1)表示一个人的信息 2)表示多个人的信息 4、在php中如何使用json );//json编码 );//json解码 生成json字符串 json表示大量数据,在php中表示多个、大量的数据可以数组、对象来表示 也就是说,在php,如果想生成json字符串,必须从数组、对象上生成。 解析json字符串 json_decode函数可以将一个json格式的字符串进行解析 其中,这个函数的第二个参数表示解析方式 true: 解析到数组中 false: 解析到对象中 默认值: false 关于json保存中文的问题 目前,json只支持utf-8,如果想保存中文,必须进行转码 5、语法: ●varstr=xmlHttp.responseText; ●varjson=eval("("+str+")"); 6、案例: php代码: $row: 一维数组生成一个json格式的字符串 $data: 二维数组生成一个json数组格式的字符串 html代码: 返回: ”{name: ’zhangsan’,age: 18}”eval(‘(‘+value+’)’); 返回: ”[{name: ’zhangsan’,age: 18},{name: ’lisi’,age: 20}]”eval(value); 查询数据表中所有数据并生成json字符串返回 php代码: html代码: 三、封装ajax函数库 1、添写一个自调用匿名函数 (function(){ })(); 在一个项目中,可能会引用多个js框架,如果函数名相同,会有命名冲突,定义匿名函数没有名称,就不会冲突,但匿名函数不能执行,所以需要使用以上格式让其自动执行一次。 2、封装一个函数,用于dom元素的获取 但$是局部变量,外面不能直接使用,所以: 表示为全局对象window添加一个“$”的属性,这个属性的值是当前局部变量$的值。 所以在外部,如果想获取某个dom元素,可以直接: $(‘content’); 3、封装一个函数,用于创建ajax对象 因为之前,我们将一个函数赋值给了$,函数也是对象,所以$也就是一个对象 表示为对象$添加一个新的方法: init 当然,也可以添加其它方法 4、封装ajax的get请求 为对象$添加一个get方法,参数有三个 url: 表示ajax请求的页面地址 data: 表示get请求时所需要传递的参数 callback: 当ajax得到正确数据后,所执行的回调函数,也就是参数callback接收的参数应该是一个函数。 5、封装post请求 为对象$添加一个post方法,参数有三个 url: 表示ajax请求的页面地址 data: 表示post请求时所需要传递的参数 callback: 当ajax得到正确数据后,所执行的回调函数,也就是参数callback接收的参数应该是一个函数。 当调用ajax请求时,可以使用这种形式: $.method(页面地址,传递参数,处理函数); 那么对应的方法中callback参数就指向了这个处理函数,所以 callback(xhr.responseText); 相当于 处理函数(xhr.responseText); 6、添加返回值类型 现在,我们在ajax程序中,可以使用三种数据形式: 1)字符串 2)xml 3)json 我们需要完善这个框架,可以返回不同类型的数据,再进行不同的处理。 首先,为get和post方法添加第四个参数: type,表示期望得到的返回值类型 如果用户在调用时,没有指定这个参数,就需要给它一个默认值: 再根据type值的不同,返回对应的数据 调用形式 $.method(请求地址,参数,处理函数,数据类型); 四、Ajax分页 smarty+ajax+php 1)html 2)php 3)模板 代码见: page.html page.php page.htpl 五、分类联动 两个下拉列表 第一个列表显示所有大分类 大分类在改变之后,相应将对应在的小分类显示在第二个列表中 代码见: kind.html kind.php 六、搜索功能 当用户在文本框内输入内容,每次输入一个字符后会发送一个ajax请求,将表中对应的数据返回,并显示在下面的div中 代码见: search.html search.php
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Ajax