注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

AJAX的基本用法  

2014-08-16 23:40:22|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

AJAX的基本用法----梦幻雪冰

欢迎学习交流----梦幻雪冰
      AJAX:通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。如何使用AJAX的呢,接下来给大家做详细介绍下。
1. AJAX的基本步骤
创建请求
var xhr = new XMLHttpRequest();
确定即将连接的网址及方式
var url = "http://m18050905128.blog.163.com/";
xhr.open("get",url,true); 
第一个参数:有post或get,第二个参数是要链接的网址,第三个是否发起异步请求
要发送给服务器的数据,如果没有则为null
xhr.send(null);
ajax请求成功后的回调
xhr.onload = function(){
       // 服务器返回的数据
       console.log(xhr.responseText);
}
如何来理解这个几个步骤呢?
理解:可以比作是写一封邮件,一开始进行写邮件内容,前期准备好了【创建请求】;写好了邮件的内容,我们需要进行发送邮件,就需要写邮件地址、是否定时发送【确定即将连接的网址以及方式】;进行点击发送邮件【要发送给服务器的数据】;对方成功收到你发的邮件【ajax请求成功后的回调】;对方收到邮件后,会给你一个回复或者自动回复【服务器返回的数据】。通过简单的理解,AJAX是如此的简单~
欢迎学习交流----梦幻雪冰
2. JSON与XML的简单介绍
JSON(JavaScript Object Notation)轻量级数据格式
XML是一种可扩展标记语言,与HTML都是标记语言
那为什么需要了解使用这两个数据格式?
首先你要明白,前台和后台进行数据交互的时候,需要一种两个都能进行信息传递的语言,那么数据格式也就是所谓的语言。
3. AJAX通过JSON调取数据
如何书写JSON?
在写JSON的时候注意:
里面的引号必须是双引号,否则报错
{
     "blogTitle" :"梦幻雪冰",
     "blogAddress" : "http://m18050905128.blog.163.com/",
     "blog" : "60篇",
     "blogInfo" : [
          {
               "blogName" : "ajax json的解析"
          },{
               "blogDate" : "2014-8-5"
          }
     ]
}
通过JSON发送回来的数据是string类型的,那么如何转换成JS对象?
欢迎学习交流----梦幻雪冰

// 创建请求
var xhr = new XMLHttpRequest();

// 确定即将连接的网址及方式
var url = "http://localhost/JSON/object.json";
xhr.open("get",url,true);
// 第一个参数:有post或get,第二个参数是要链接的网址,第三个是否发起异步请求

// 要发送给服务器的数据,如果没有则为null
xhr.send(null);
// ajax请求成功后的回调

xhr.onload = function(){
// 服务器返回的数据
// 检测数据返回类型
console.log(typeof xhr.responseText);
// 把JSON string类型转换成JS对象
var obj = JSON.parse(xhr.responseText);
// 通过转换的对象进行访问JSON文件内容
console.log(obj.blogInfo[1].blogDate);
}

如何把一个JS对象转换成JSON字符串?

var obj = {
"name" : "梦幻雪冰",
"class" : "网易博客"
}
console.log(JSON.stringify(obj));

欢迎学习交流----梦幻雪冰


欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
  评论这张
 
阅读(129)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017