基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现

最新推荐文章于 2024-09-18 09:11:54 发布

weixin_30463341

最新推荐文章于 2024-09-18 09:11:54 发布

阅读量106

点赞数

文章标签： json javascript python ViewUI

原文链接：http://www.cnblogs.com/wylshkjj/p/11494718.html

版权

基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现
1.基于JS的ajax的实现
step1: var xmlhttp = XMLHttprequest() #实例化一个对象
step2: xmlhttp.open("") #url地址
step3: xmlhttp.send("name=alex") #请求体的内容 if GET请求 ：send(null)
 step4: 监听：xmlhttp(if ==4:{var context=xmlHttp.responsetext})
 GET:ajax具体实现（JS方式）：
<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Title</title>
 </head>
 <body>
 <button οnclick="func1()">ajax提交</button>
 </body>
 <script>
 function func1(){
 //step1
 var xmlhttp=createXMLHttpRequest();
 //step4：推荐放到这个位置
xmlhttp.onreadystatechange=function() {//监听
{#alert(xmlhttp.status);//返回状态码#}
 if(xmlhttp.readyState==4 && xmlhttp.status==200){
 {#alert(xmlhttp.readyState);//查看状态过程#}
 var data=xmlhttp.responseText;
 alert(data);
 };
 }
 //step2
 xmlhttp.open("GET","/ajax/",true);//打开服务器连接
//step3
 xmlhttp.send(null);//发送请求
};
 {#处理浏览器兼容问题#}
 function createXMLHttpRequest(){
 var xmlHttp;
 //适用于大多数浏览器，以及IE7和更高版本
try{
 xmlHttp = new XMLHttpRequest();
 } catch (e){
 //适用于IE6
 try{
 xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
 } catch (e){
 //适用于IE5.5，以及更早版本
try{
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e){}
 }
 }
 return xmlHttp;
 }

 </script>
 </html>
 POST:请求注意事项
POST请求必须设置ContentType请求头的值为：application/x-www-form-urlencoded。
 表单的enctype默认值就是为application/x-www-form-urlencoded，因为默认值就是这个，
 当设置了<form>的enctype="application/x-www-form-urlencoded"时，等同于设置了Con
 tent-Type请求头。但在ajax发送请求时，就没有默认值了，这需要自行设置请求头：
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
 实例：
<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Title</title>
 </head>
 <body>
 <form>
 <p>用户名：<input type="text" name="username" οnblur="func1(this)">
 <span id="error"></span>
 </p>
 <p>密码：<input type="password" name="pwd"></p>
 <input type="submit" value="submit">
 </form>
 </body>
 <script>
 function func1(self){
 var username=self.value;
 var xmlhttp=createXMLHttpRequest();
 xmlhttp.open("POST","/register/",true);
 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 xmlhttp.send("username="+username);
 xmlhttp.onreadystatechange=function() {
 if(xmlhttp.readyState==4 && xmlhttp.status==200){
 var s=xmlhttp.responseText;
 if (s=="1"){
 document.getElementById("error").innerHTML="用户名已经注册过了";
 }
 };
 }
 }
 {#处理浏览器兼容问题#}
 function createXMLHttpRequest(){
 var xmlHttp;
 //适用于大多数浏览器，以及IE7和更高版本
try{
 xmlHttp = new XMLHttpRequest();
 } catch (e){
 //适用于IE6
 try{
 xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
 } catch (e){
 //适用于IE5.5，以及更早版本
try{
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e){}
 }
 }
 return xmlHttp;
 }
 </script>
 </html>
2.JSON和JSONP
 JSON与XML比较：
 可读性：XML好；
 解码难度：JSON本身就是Js对象（主场作战），所以简单很多；
 流行度：xml已经流行很多年，但在AJAX领域json更受欢迎；
js接受python的json对象：
 在json的编码过程中，会存在从python原始类型向json类型的转换过程，具体的转换如下：
python json对象
dict object
 list，tuple array
 str,unicode string
 int,long,float number
 True true
 False false
 None null
 JSON.parse()
 .parse()方法：parse用于从一个字符串中解析出json对象
JSON.stringify()
 .stringify()方法：stringify用于从一个对象解析出字符串
 示例：
$.post("/jquery/",function(data){
 console.log(data);
 console.log(typeof data);
 data=JSON.parse(data);#parse用于从一个字符串中解析出json对象
console.log(typeof data);
 console.log(data["name"]);
 });
 json示例：//注：字符串必须双引号，否则不是json
 #author：wylkjj
 #date：2019/9/6
 import json
 f=open('text','r')
 data=f.read()
 data=json.loads(data)
 f.close()
 print(data["name"])

 import json
 dic={'name':'eric'}
 data=json.loads(data)
 print(data["name"])
3.基于JQuery的ajax的实现:(最底层方法：$.ajax())
 $.ajax(
 url:
 type:"POST"
 )
 $.get()
 $.post()
 $.getJson():相当于$.get( type:Json)
 $.getScript():实时加载，现用现取，不用不加载
 两种书写方式：
 （1）.$.ajax({
 url:"/ /",
 type:"POST"
 })
 （2）.$.ajax("",{})
 请求数据：data,processDate,contentType,traditional,dataType,sucess
 data:当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式（urlencoded?a=1&b=2）
 发送给服务端；此外，ajax默认以get方式发送求。
processDate:声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，那么对data：{a:1,b:2}会调用
json对象的toString()方法，即