Ajax 就是前端人员必须会的一种数据交互的方法. 可以实现在浏览器不经过手动刷新的方式, 数据的实时更新
其实最直观的就是股票的实时情况的展示
//Ajax 异步请求 5 个步骤:
1. 创建 xmlhttprequest 对象 2. 配置 type+url 等 3.open(type,url,true) 方法 4.send() 方法 5.onreadystatechange 状态检查
- function Ajax(myjson){
- var type=myjson.type;
- var url=myjson.url;
- var success=myjson.success;
- var xhr=new XMLHttpRequest();
- //open() 和 send() 方法是将数据发送到服务器
- xhr.open(type,url,true);
- xhr.send()
- // 与 POST 相比, GET 更简单也更快, 并且在大部分情况下都能用.
- // 然而, 在以下情况中, 请使用 POST 请求:
- // 无法使用缓存文件 (更新服务器上的文件或数据库)
- // 向服务器发送大量数据 (POST 没有数据量限制)
- // 发送包含未知字符的用户输入时, POST 比 GET 更稳定也更可靠
- xhr.onreadystatechange=function(){
- if(xhr.status==200&&xhr.readyState==4){
- success(xhr.response);
- }
- }
- }
- var str=''
- Ajax({
- type:'GET',
- url:'data.php',
- data:'',
- success:function(msg){
- // 把拿到的 JSON 字符串变成 JSON 对象
- var result= JSON.parse(msg);
- // 创建 li 标签
- var oli=document.createElement('li');
- for (var j=0;j<result[i].length;j++) {
- // 遍历所有的数组
- str+='<li><a href='+result[i][j].url1+'><b>'+result[i][j].title+'</b></a><a href='+result[i][j].url2+'>'+result[i][j].dec+'</a></li>'
- oul.innerhtml=str;
- }
- }
- });
来源: http://www.qdfuns.com/article/46153/2f3e1e2d482716fae2a0996d4c91bbb1.html