分针网—每日分享:JavaScript-Ajax
2017-06-08 09:11
330 查看
http://www.f-z.cn/id/220
一、服务器搭建(php+apache)
http://www.php100.com/html/plugin/ser/2013/0905/91.html
二、什么是Ajax(阿贾克斯)
Asynchronous JavaScript and XML(异步JavaScript和XML,即用JavaScript异步形式去操作xml)
- 节省用户操作时间,提高用户体验,减少数据请求;
- 传输获取数据;
- 无需用户刷新,动态请求网络数据;
三、Ajax作用
异步获取数据,即是数据交互(通过ajax获取某一文本文件的内容);
四、Ajax过程
【注: 如果直接以文件形式打开,是会出错的,所以一定要搭建服务器!!!】
创建对象XMLHttpRequest()
open()方法
send()
request.onreadystatechange = function(){}
// 1、打开浏览器// 创建一个ajax对象 ( ie6以下new ActiveXObject(‘Microsoft.XMLHTTP’) )var request = null;if (window.XMLHttpRequest) { request = new XMLHttpRequest();} else { request = new ActiveXObject('Microsoft.XMLHTTP');}// 2、在地址栏输入地址/*open方法 参数一: 打开方法 get/post 参数二: 请求地址 参数三: 是否异步 (true异步: 非阻塞 / false同步: 阻塞)*/request.open('get', '00-笔记.rtf', true);// 3、提交请求(回车)request.send();// 4、等待服务器返回内容/**responseText: ajax请求返回的数据即存放在该属性下(都为字符串): readyState属性: 请求状态 0: (初始化)还没有调用open()方法 1: (载入)已调用send()方法,正在放请求 2: (载入完成)send()方法完成,已收到全部响应内容 3: (解析)正在解析响应 4: (完成)响应内容解析完成,可以在客户端调用 on readystate change: 当readyState改变的时触发 status: 服务器状态,http状态码 1字开头: 消息类 2字开头: 成功类 3字开头: 重定向类 4字开头: 请求错误类 5字开头: 服务器错误类 */request.onreadystatechange = function(){ if(request.readyState == 4){ if(request.status == 200){ // 请求到数据,显示 var oP = document.createElement('p'); document.body.appendChild(oP); oP.innerHTML = request.responseText; } else { alert('错误了'); } } }
五、同步、异步
同步:小店吃饭,小店老板厨师都是一个人
程序中:如果程序在下载数据,UI界面就无法响应;
异步:饭堂吃饭,收银台,打饭的,厨师,各自互不影响
程序中:异步下载数据和UI界面两个线程;
六、JOSN数据解析
JSON.parse()将一个符合JSON语法的字符串解析成一个对应类型的值或对象
var dataSource = JSON.parse(request.responseText);
在线解析:
http://json.cn
http://tool.oschina.net/codeformat/json
七、get和post请求
在http协议中定义了8种http请求的方法(get/post/options/head/put/delete/trace/connect/patch),但通常都是get和post,即常说的使用http的get或post请求。
get/post请求是跟服务器进行交互的;
参数:是传递给服务器的具体数据,例如登陆的账号密码;
get请求:在请求URL后面以 ? 的形式跟上发给服务器的参数,多个参数之间用&隔开,例如:http://10.0.8.8/sns/my/login.php?username=erfangdong&password=123456 【注:由于浏览器和服务器对URL长度有限制,因此在URL后面附带的参数是有限制的,通常不能超过1KB】
// get请求,参数直接拼接到url中request.open('get', './07-data.php?user=123@qq.com&password=123321', true);request.send();
post请求:发给服务器的参数全部放在请求体(URL中看不到)中【注:post传递的数据量没有显示,这具体还得看服务器的处理能力】
// 请求头,传输的数据类型(post默认是没有设置的)request.setRequestHeader('content-type','application/x-www-form-urlencoded');// 请求参数request.send('userName=EndEvent&age=30');
get和post区别
1、post请求 请求地址和参数分离,比get更加安全 get请求的参数 直接暴漏在外面 不安全(相对而言)
2、get请求只能获取服务器的数据(下载数据/提交参数) 不能上传文件,而post两者都可以
3、get请求在浏览器中字符串长度最大限制为1024,post没有限制
八、ajax的封装
/* * metchod: 请求方式 * url: 请求地址 * data: 请求参数 * successFn: 请求成功执行的函数 */function ajax(method, url, data, successFn){}
九、相关问题
缓存问题
问题: 发送同样的请求,因为存在有缓存,即当服务器内容发生改变后,会导致获取不了最新的数据。
解决: 在url的后面再添加一个随机数/时间戳(其实就保证每次发起的请求是不一样的),这即可保证每次获取的数据都是最新的,而不是缓存数据。
// 添加一个时间戳ajax('get','05-getData.php','userName=EndEvent&age=18&'+new Date().getTime(), function(response){ alert(response);});
注: get有缓存问题,而post是没有缓存问题的;
中文乱码问题
问题: 如果参数中有中文,即会出现乱码问题。
解决: 将中文进行编码处理encodeURI。
ajax('get','05-getData.php','userName=' + encodeURI('啦啦') + '&age=18&'+new Date().getTime(),function(response){ alert(response);});
十、跨域访问问题(浏览器安全限制所导致)
源文件与访问文件,不是在同一个目录下的,或者访问其他服务器的内容,这即是跨域访问,但是对于ajax是不支持跨域访问的。
解决跨域访问方法:
1、通过代理(即类似前面中的,获取JSON数据,那么就需要在后台服务器的php这个代理,来实现跨域访问)
操作: 每需要获取数据,都要后台服务器添加对应的操作,实用性不高;
2、XHR2(XMLHttpRequest level2是HTML5提供的方法)
问题: IE10以下都不支持;
3、flash
操作: 在服务器端需要一个crossdomain.xml跨域文件,这里有对应的白名单;
4、JSONP(JSON with Padding)
操作: 因为script标签是没有跨域问题的,是可以获取到数据的(例如网络获取jquery.js)
十一、JSONP(JSON with Padding)
通过script标签获取到对应的数据(即是包含在html文件中了)
问题: 请求回来的数据没有变量,使用不了
解决:
方式一: 可以给整体数据添加一个变量名(但这会有整体设计问题)
方式二: 通过函数调用,给函数传递参数的方式将整体数据传递过去
a、在资源加载之前定义一个函数,在函数中接收一个参数,在函数中即是获取数据后的操作;
b、需要时,通过script标签加载对应的远程文件数据,当数据加载进来的后,就会调用前面定义好的函数,并且将数据当做上函数的参数传入;
学习更多IT知识 加群:272292492
一、服务器搭建(php+apache)
http://www.php100.com/html/plugin/ser/2013/0905/91.html
二、什么是Ajax(阿贾克斯)
Asynchronous JavaScript and XML(异步JavaScript和XML,即用JavaScript异步形式去操作xml)
- 节省用户操作时间,提高用户体验,减少数据请求;
- 传输获取数据;
- 无需用户刷新,动态请求网络数据;
三、Ajax作用
异步获取数据,即是数据交互(通过ajax获取某一文本文件的内容);
四、Ajax过程
【注: 如果直接以文件形式打开,是会出错的,所以一定要搭建服务器!!!】
创建对象XMLHttpRequest()
open()方法
send()
request.onreadystatechange = function(){}
// 1、打开浏览器// 创建一个ajax对象 ( ie6以下new ActiveXObject(‘Microsoft.XMLHTTP’) )var request = null;if (window.XMLHttpRequest) { request = new XMLHttpRequest();} else { request = new ActiveXObject('Microsoft.XMLHTTP');}// 2、在地址栏输入地址/*open方法 参数一: 打开方法 get/post 参数二: 请求地址 参数三: 是否异步 (true异步: 非阻塞 / false同步: 阻塞)*/request.open('get', '00-笔记.rtf', true);// 3、提交请求(回车)request.send();// 4、等待服务器返回内容/**responseText: ajax请求返回的数据即存放在该属性下(都为字符串): readyState属性: 请求状态 0: (初始化)还没有调用open()方法 1: (载入)已调用send()方法,正在放请求 2: (载入完成)send()方法完成,已收到全部响应内容 3: (解析)正在解析响应 4: (完成)响应内容解析完成,可以在客户端调用 on readystate change: 当readyState改变的时触发 status: 服务器状态,http状态码 1字开头: 消息类 2字开头: 成功类 3字开头: 重定向类 4字开头: 请求错误类 5字开头: 服务器错误类 */request.onreadystatechange = function(){ if(request.readyState == 4){ if(request.status == 200){ // 请求到数据,显示 var oP = document.createElement('p'); document.body.appendChild(oP); oP.innerHTML = request.responseText; } else { alert('错误了'); } } }
五、同步、异步
同步:小店吃饭,小店老板厨师都是一个人
程序中:如果程序在下载数据,UI界面就无法响应;
异步:饭堂吃饭,收银台,打饭的,厨师,各自互不影响
程序中:异步下载数据和UI界面两个线程;
六、JOSN数据解析
JSON.parse()将一个符合JSON语法的字符串解析成一个对应类型的值或对象
var dataSource = JSON.parse(request.responseText);
在线解析:
http://json.cn
http://tool.oschina.net/codeformat/json
七、get和post请求
在http协议中定义了8种http请求的方法(get/post/options/head/put/delete/trace/connect/patch),但通常都是get和post,即常说的使用http的get或post请求。
get/post请求是跟服务器进行交互的;
参数:是传递给服务器的具体数据,例如登陆的账号密码;
get请求:在请求URL后面以 ? 的形式跟上发给服务器的参数,多个参数之间用&隔开,例如:http://10.0.8.8/sns/my/login.php?username=erfangdong&password=123456 【注:由于浏览器和服务器对URL长度有限制,因此在URL后面附带的参数是有限制的,通常不能超过1KB】
// get请求,参数直接拼接到url中request.open('get', './07-data.php?user=123@qq.com&password=123321', true);request.send();
post请求:发给服务器的参数全部放在请求体(URL中看不到)中【注:post传递的数据量没有显示,这具体还得看服务器的处理能力】
// 请求头,传输的数据类型(post默认是没有设置的)request.setRequestHeader('content-type','application/x-www-form-urlencoded');// 请求参数request.send('userName=EndEvent&age=30');
get和post区别
1、post请求 请求地址和参数分离,比get更加安全 get请求的参数 直接暴漏在外面 不安全(相对而言)
2、get请求只能获取服务器的数据(下载数据/提交参数) 不能上传文件,而post两者都可以
3、get请求在浏览器中字符串长度最大限制为1024,post没有限制
八、ajax的封装
/* * metchod: 请求方式 * url: 请求地址 * data: 请求参数 * successFn: 请求成功执行的函数 */function ajax(method, url, data, successFn){}
九、相关问题
缓存问题
问题: 发送同样的请求,因为存在有缓存,即当服务器内容发生改变后,会导致获取不了最新的数据。
解决: 在url的后面再添加一个随机数/时间戳(其实就保证每次发起的请求是不一样的),这即可保证每次获取的数据都是最新的,而不是缓存数据。
// 添加一个时间戳ajax('get','05-getData.php','userName=EndEvent&age=18&'+new Date().getTime(), function(response){ alert(response);});
注: get有缓存问题,而post是没有缓存问题的;
中文乱码问题
问题: 如果参数中有中文,即会出现乱码问题。
解决: 将中文进行编码处理encodeURI。
ajax('get','05-getData.php','userName=' + encodeURI('啦啦') + '&age=18&'+new Date().getTime(),function(response){ alert(response);});
十、跨域访问问题(浏览器安全限制所导致)
源文件与访问文件,不是在同一个目录下的,或者访问其他服务器的内容,这即是跨域访问,但是对于ajax是不支持跨域访问的。
解决跨域访问方法:
1、通过代理(即类似前面中的,获取JSON数据,那么就需要在后台服务器的php这个代理,来实现跨域访问)
操作: 每需要获取数据,都要后台服务器添加对应的操作,实用性不高;
2、XHR2(XMLHttpRequest level2是HTML5提供的方法)
问题: IE10以下都不支持;
3、flash
操作: 在服务器端需要一个crossdomain.xml跨域文件,这里有对应的白名单;
4、JSONP(JSON with Padding)
操作: 因为script标签是没有跨域问题的,是可以获取到数据的(例如网络获取jquery.js)
十一、JSONP(JSON with Padding)
通过script标签获取到对应的数据(即是包含在html文件中了)
问题: 请求回来的数据没有变量,使用不了
解决:
方式一: 可以给整体数据添加一个变量名(但这会有整体设计问题)
方式二: 通过函数调用,给函数传递参数的方式将整体数据传递过去
a、在资源加载之前定义一个函数,在函数中接收一个参数,在函数中即是获取数据后的操作;
b、需要时,通过script标签加载对应的远程文件数据,当数据加载进来的后,就会调用前面定义好的函数,并且将数据当做上函数的参数传入;
学习更多IT知识 加群:272292492
相关文章推荐
- 分针网——每日分享:JavaScript严格模式
- 分针网——每日分享:Ajax数据返回格式问题解决
- 分针网—每日分享:JavaScript Array 原型方法 大盘点
- 分针网——每日分享:ajax +NodeJS 实现图片上传
- 分针网—每日分享:JavaScript学习笔记:数组的sort()和reverse()方法
- 分针网—每日分享:php xml常用函数的集合
- 分针网—每日分享: jQuery动画的hover连续触发动画bug处理
- 分针网—每日分享: JavaScript 数组和对象就像书和报纸一样
- javascript原生ajax写法分享
- 分针网——每日分享:页面滚动到底部自动加载
- 分针网—每日分享:网页布局时CSS无效的常见原因
- 原生Javascript封装的一个AJAX函数分享
- 分针网——每日分享:in,typeof,instanceof,===运算符的作用
- Ajax 及javascript技术分享
- 分针网—每日分享:PHP接入支付宝教程
- 分针网——每日分享:PHP开发几点安全问题
- javascript请求servlet实现ajax示例(分享)
- javascript原生ajax写法分享
- 分针网—每日分享:css命名规范
- 原生Javascript封装的一个AJAX函数分享