基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现
- 基于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 onclick="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" onblur="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()方法，即{a:1,b:2}.toString(),最后得到一个[object，Object]形式的结果。该属性的意义在于当
data是一个dom结构或者xml数据时，我们希望数据不进行处理，直接发过去，就可以将其设置为true。
contentType:
默认值："application/x-www-form-urlencoded"，发送信息至服务器时内容编码类型。
用来指明当前请求的数据编码格式：urlencoded:?a:1&b:2;如果想以其他方式提交数据，比如contentType:
"application/json",即向服务器发送一个json字符串：
dataType:
当dataType已经声明为“json”时，就是告诉服务器“要回就给给我回json格式的，不然老子不要！”，
而且接受到数据后将自动转换成JavaScript对象。dataType的可用值：html xml json text script
success:
success参数：success:function(){} 当成功执行时执行的函数
complete：
complete参数：complete:function(){} 当执行不成功的时候执行的函数
complete会打印所有错误信息
beforeSend(XHR):
类型：Function发送请求前可修改XMLHttpRequest 对象的函，如添加自定义HTTP头。XMLHttpRequerst
对象是唯一的参数。这是一个Ajax事件。如果返回false可以取消本次ajax请求。
error:
error:function(data){
alert(data)
}
内部错误，指服务器的内部错误
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func1()">AJAX提交</button>
<script src="/static/jquery-3.1.1.min.js"></script>
<script>
function func1() {
Text()
}
function Text(){
//回调函数
//$.post();
//$.get("/jquery/",{name:"eric"});
//$.post("/jquery/",{name:"eric"});
$.post("/jquery_get/",{name:"eric"},function(data,stateText,obj){
//console.log(arguments);//打印参数对象中的所有参数
console.log(data);
console.log(stateText);
console.log(obj);
alert(data);
});
}
</script>
</body>
</html>
$.ajax() 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func1()">AJAX提交</button>
<script src="/static/jquery-3.1.1.min.js"></script>
<script>
function func1() {
Text()
}
function Text(){
//$.post();
//$.get("/jquery/",{name:"eric"});
//$.post("/jquery/",{name:"eric"});
$.post("/jquery_get/",{name:"eric"},function(data,stateText,obj){
//console.log(arguments);//打印参数对象中的所有参数
console.log(data);
console.log(stateText);
console.log(obj);
alert(data);
});
$.ajax({
url:"/jquery_get/",
type:"POST",
//data:{a:1,b:2},
data:{a:1,b:[3,4]},//迭代循环，深层循环
traditional:true //禁止程序执行默认的迭代循环，深层循环
//processData:false,
//contextType:text,
});
}
</script>
</body>
</html>
4.注：浏览器兼容版本问题
{#处理浏览器兼容问题#}
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;
}
5.jQuery的data属性写法有很多.一种是json格式,类似{key:"value",key2:"value2"}.
另一种: data: xmlDocument(必须设置:processData: false,防止自动转换),还有一种:data: "name=John&location=Boston"
基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现的更多相关文章
- ajax 请求 对json传的处理 Jquery 使用Ajax获取后台返回的Json数据后,页面处理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别
为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...
- ajax中的json和jsonp详解
出现的问题: 花了点时间研究ajax中的json和jsonp的原理,这里记录一下.以前一直在使用ajax调用数据,但是从来没有遇到跨域问题,也从来没有注意过json和jsonp的区别,总是一通乱用.但 ...
- json和jsonp的区别，ajax和jsonp的区别
json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...
- 使用JSONP，jQuery的ajax跨域获取json数据
网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...
- Ajax学习（二）：模仿jQuery的Ajax封装工具
通过上一节的学习,基本了解Ajax的使用, 但是这样使用很麻烦,这里封装ajax为一个方法,作为一个ajax工具,传入相应参数就可以实现ajax的使用. 模仿jQuery的Ajax. 如下是jQuer ...
- json与jsonp应用及其他ajax数据交互方式
1.json是数据交换格式,使用实例如下: $.getJSON( '/manage/asset/asset_delByIds.action', { 'ids':id }, function(data) ...
- 第6章 jQuery与Ajax的应用
6.1 Ajax的优势和不足 6.1.1 Ajax的优势 1.不需要插件支持 2.优秀的用户体验 3.提高Web程序的性能 Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的 ...
- jQuery与Ajax的应用——《锋利的jQuery》（第2版）读书笔记3
第6章 jQuery与Ajax的应用 jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$ ...
- jQuery 与 Ajax 的应用
Ajax 全称为 "Asynchronous JavaScript and XML"(异步 JavaScript 和 XML ),它并不是指一种单一的技术,而是有机地利用了一系列交 ...
随机推荐
- 浅谈Python中函数式编程、面向对象编程以及古怪的PythonIC
1.函数式编程作为结构化编程的一种,正在受到越来越多的重视.那么什么事函数式编程呢? 在维基百科中给出了详细的定义,函数式编程又称泛函数编程,是一种编程规范,它将函数运算视为数学上的函数计算.简单的来 ...
- 2019年12月4日Linux开发手记
OK,经过昨天对V4L2工作流程的学习,现在已经大体了解了V4L2的工作原理,现在开始对V4L2的API的学习,目标:1.打开摄像头 2.储存图像 3.关闭摄像头,API网址:Linux Media ...
- 《软件安装》centos 安装 mysql
上期问题回顾 全球 IPv4 地址正式耗尽,IPv4地址大约42.9亿,按照理论来说,每一个联网的设备都需要IP地址,而现在全球联网设备远远不止42.9亿,那么,这么多设备是怎么处理联网的问题呢? 先 ...
- 对照谈-官方spring-boot-starter和自定义starter异同分析
在前面我讲用spring-boot-starter-mail发邮件的时候,我侧重看的是spring boot发邮件的便利性,今天,我们聊下另外一个方面,spring-boot-starter自身的结构 ...
- mysql 基础知识整理
什么是MySQL? MySQL 是一种关系型数据库,在Java企业级开发中非常常用,因为 MySQL 是开源免费的,并且方便扩展.阿里巴巴数据库系统也大量用到了 MySQL,因此它的稳定性是有保障的. ...
- Django如何启动源码分析
Django如何启动源码分析 启动 我们启动Django是通过python manage.py runsever的命令 解决 这句话就是执行manage.py文件,并在命令行发送一个runsever字 ...
- PAT（甲级）2019年秋季考试
第一题用搜索,超时了,待补 更新第一题思路 dfs + 剪枝,首先确定 n的最后一位数字肯定是9,为什么呢,因为 任意两个相邻的数肯定互为质数(gcd=1),所以 n 的末尾肯定是9,这样n+1产生的 ...
- Java基础IO类之字符串流（查字符串中的单词数量）与管道流
一.字符串流 定义:字符串流(StringReader),以一个字符为数据源,来构造一个字符流. 作用:在Web开发中,我们经常要从服务器上获取数据,数据返回的格式通常一个字符串(XML.JSON), ...
- spring-MVC_笔记
需求:客户端发起请求,服务器端接收请求,执行逻辑并进行视图跳转. ①导入SpringMVC相关坐标②配置SpringMVC核心控制器DispathcerServlet ③创建Controller类和视 ...
- 强化学习环境OpenAi搭建，从虚拟机到Gym、Mujoco和mujoco-py的完整安装
平时不怎么写博客,这次是因为环境的配置花费了我大概一个星期的时间.所以简单的记录一下搭建的整个过程,其中有些部分我直接推荐别人的博客的基本教程,都是我亲自尝试过成功的.同时,也希望这篇博客可以帮到您. ...