前端开发之JSON、AJAX和JSONP

本文详细介绍了前端开发中的JSON基础,包括Python与JSON对象的对应、parse()和stringify()方法以及Django向JS发送数据。接着讲解了AJAX的基本概念、应用场景、优缺点和实现方式,包括基于JS和jQuery的AJAX实例。最后讨论了JSONP,阐述了同源策略、JSONP的JS和jQuery实现,并解释了其原理。
摘要由CSDN通过智能技术生成

一、JSON

1. JSON基础

  • JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON是用字符串来表示Javascript对象。
  • json字符串就是js对象的一种表现形式(字符串的形式)。
  • json.dumps()出来的是json字符串,再json.load()出来的才是json对象。json.load()是Python的方法,在js里是JSON.parse(),用来把JSON字符串转换为JS对象。
  • HttpResponse里面只能放字符串。json对象的编码规范是用双引号""包起来的。

python中的json模块:这里面的json_str就是json字符串。

import json
i=10
s='hello'
t=(1,4,6)
l=[3,5,7]
d={
   'name':"yuan"}

json_str1=json.dumps(i)
json_str2=json.dumps(s)
json_str3=json.dumps(t)
json_str4=json.dumps(l)
json_str5=json.dumps(d)

print(json_str1)   #'10'
print(json_str2)   #'"hello"'
print(json_str3)   #'[1, 4, 6]'
print(json_str4)   #'[3, 5, 7]'
print(json_str5)   #'{"name": "yuan"}'

JSON字符串内可以有的值:

  • 数字 (整数或浮点数)
  • 字符串 (在双引号中)
  • 逻辑值 (true 或 false)
  • 数组 (在方括号中)
  • 对象 (在花括号中,引号用双引)
  • null

注:JSON对象为js的子集,是因为像undefined, NaN, {‘name’:‘yuan’}等都不在json对象的范畴。

2. python与json对象的对应

同一个数据,在不同的语言中有不同的数据类型。在Python中,如果要得到一个json字符串,那么就要把Python数据先转换成js对应的数据对象(比如python的元组被转换成js的数组,字典被转换成js的object),再加上引号就是json字符串了。前端接收到json字符串,就可以通过JSON.parse()等方法解析成json对象(即js对象)直接使用了。

   python         -->        json
   dict                      object
   list,tuple                array
   str,unicode               string
   int,long,float            number
   True                      true
   False                     false
   None                      null

3. parse() 和 stringify()

parse() 用于从一个json字符串中解析出json对象:

var str = '{"name":"yuan","age":"23"}'

结果:JSON.parse(str)     ------>  Object  {
   age: "23",name: "yuan"}

stringify()用于从一个json对象解析成json字符串:

var c= {
   a:1,b:2} 

结果:  JSON.stringify(c)     ------>      '{"a":1,"b":2}'

注意1:单引号写在{
   }外,每个属性名都必须用双引号,否则会抛出异常。
注意2:

a={
   name:"yuan"};   //ok
b={
   'name':'yuan'}; //ok
c={
   "name":"yuan"}; //ok

alert(a.name);  //ok
alert(a[name]); //undefined
alert(a['name']) //ok

4. django向js发送数据

def login(request):
    obj={
   'name':"alex111"}
    return render(request,'index.html',{
   "objs":json.dumps(obj)})
#----------------------------------
 <script>
     var temp={
   {
    objs|safe }}
     alert(temp.name);
     alert(temp['name'])
 </script>

二、Ajax

1. Ajax基础

AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

ajax的两个特点:局部刷新、异步传送。

  • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求。
  • 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

js实现的局部刷新:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<script type="text/javascript">
window.onload = function() {
   //当文档加载完毕时执行本函数
    var form = document.getElementById("form1");//获取表单元素对象
    form.onsubmit = function() {
   //给表单元素添加一个监听,监听表单被提交事件
        var usernameValue = form.username.value;//获取表单中名为username的表单元素值
        if(!usernameValue) {
   //判断该值是否为空
            var usernameSpan = document.getElementById("usernameSpan");//得到usernmae元素后的<span>元素
            usernameSpan.innerText = "用户名不能为空!";//设置span元素内容!
            return false;//返回false,表示拦截了表单提交动作
        }
        return true;//不拦截表单提交动作
    };
};
</script>
</head>
 <body>
<h1>注册页面</h1>
<form action="" method="post" id="form1">
用户名:<input type="text" name="username"/>
<span id="usernameSpan"></span>
<br/>
密 码:<input type="password" name="password"/>
<span id="passwordSpan"></span>
<br/>
<input type="submit" value="注册"/>

</form>
  </body>
</html>

2. Ajax常见应用场景

注册某个网站账户密码时,当输入的用户名已被注册时,把光标移动到其他表单项上,浏览器会使用AJAX技术向服务器发出请求,服务器会查询该名称是否存在,最终服务器返回true表示该名称已经存在了,浏览器在得到结果后显示“用户名已被注册!”。这个过程整个网页并没有被刷新,只是用户名局部刷新。

3. Ajax的优缺点

优点:

  • Ajax使用Javascript技术向服务器发送异步请求;
  • Ajax无须刷新整个页面;
  • 因为服务器响应内容不再是整个页面,而是页面中的局部,所以Ajax性能高;

缺点:

  • Ajax并不适合所有场景,很多时候还是要使用同步交互;
  • Ajax虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大;
  • 因为Ajax是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题;

4. 基于JS的Ajax的实现

四步操作:

  • step1:创建核心对象;

    var xmlhttp = XMLHttprequest()
    
  • step2:使用核心对象打开与服务器的连接;

    xmlhttp.open("")
    
  • step3:发送请求;

    xmlhttp.send("name = alex")   # 请求体的内容 if GET请求 : send(null)
    
  • step4:注册监听,监听服务器响应。

    监听:xmlhttp(if == 4:{
         var context = xmlhttpresponseText }) 
    

XMLHTTPRequest:

  • open(请求方式, URL, 是否异步)
  • send(请求体)
  • onreadystatechange,指定监听函数,它会在xmlHttp对象的状态发生变化时被调用;
  • readyState,当前xmlHttp对象的状态,其中4状态表示服务器响应结束;
  • stat
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值