原生ajax中get和post请求
后台代码：
class AjaxHanlder(tornado.web.RequestHandler):
def get(self):
print(self.get_argument('type',None))
if self.get_argument('type',None):
self.write("get ok")
else:
self.render('ajax_test.html') def post(self, *args, **kwargs):
self.write("post ok")
前端ajax:
为了兼容各个浏览器都有ajax方法
function GetXhr(){
var xhr=null;
if(XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
其中get请求一般都把数据放到url中，而不是send()中
function XhrGetRequest(){
var xhr=GetXhr();
//定义回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
document.getElementsByClassName('reponse')[0].innerHTML=xhr.responseText;
}
}
//指定连接方式和地址---文件方式
xhr.open('get',"/ajax?type=1&kk=2",true);
//发出请求
xhr.send(null);
}
只有post请求时，需要将数据放到send()中传递，并且需要设置请求头
function XhrPostRequest(){
var xhr=GetXhr();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
document.getElementsByClassName('reponse')[0].innerHTML=xhr.responseText;
}
}
xhr.open('post','/ajax',true);
//post需要设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");
//发送请求
xhr.send("type=1&kk=2");
}
使用案例：
<body>
<form method="post" action="login">
用户名：<input id="user" type="text" name="username">
密码：<input id="pwd" type="password" name="password">
<input type="checkbox" id="auto" name="auto" value="1"/>七天免登录
<input type="button" onclick="SubmitForm();" value="登录">
<span class="err"></span>
</form>
</body>
</html>
<script>
var xhr=null; function SubmitForm(){
var username=document.getElementById("user").value;
var pwd=document.getElementById('pwd').value;
var chkEle=document.getElementById('auto');
var chk=null;
if(chkEle.checked==true)
chk=1;
else
chk=0; xhr=new XMLHttpRequest();
/*参数 发送方式 发送地址 是否异步*/
//xhr.open('GET',"/login",true);
xhr.open("POST","/login",true);
//当readystate值改变时会自动去触发对应函数，先对这个值进行判断，在决定对应的函数
//0.未初始化，尚未调用open
//1.启动，调用了open未调用send
//2.发送，调用了send,未收到响应
//3.接收，已经接收到了部分响应消息
//4.完成，已经接收到所有的数据 xhr.onreadystatechange =func;
//setRequestHeader(String header,String value)设置请求头
//getAllResponseHeaders()获取所有响应头
//getResponseHeader(String header)获取响应头中指定的header的值
//void abort()终止请求 //post发送数据需要设置请求头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded; charset-UTF-8')
//用于发送数据
xhr.send('username='+username+';password='+pwd+';auto='+chk); //String responseText 服务器返回的数据字符串类型 //XmlDocument responseXML 服务器返回的数据（xml对象） //Number states 状态码 //String statesText 状态码对应文本
} function func(){
if(xhr.readyState == 4){
console.log(xhr.responseText);
var data=xhr.responseText;
var ret_dict = JSON.parse(data);
if(ret_dict.status){
//登录成功
}else{
//登录失败
var ele=document.getElementsByClassName('err')[0];
ele.innerHTML="<h1 style=\"color:red;\">"+ret_dict.message+"</h1>"
}
}
}
</script>
open(请求方式, URL, 是否异步)
send(请求体)
onreadystatechange，指定监听函数，它会在xmlHttp对象的状态发生变化时被调用
readyState，当前xmlHttp对象的状态，其中4状态表示服务器响应结束
status：服务器响应的状态码，只有服务器响应结束时才有这个东东，200表示响应成功；
responseText：获取服务器的响应体
代码实例：
<div>
<table border="">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
<th>编辑</th>
</tr>
</thead>
<tbody>
<tr><td></td>
<td>李四</td>
<td></td>
<td>男</td>
<td>C++工程师</td>
<td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid=4">编辑</a></td>
</tr>
<tr><td></td>
<td>fas</td>
<td></td>
<td>男</td>
<td>Python工程师</td>
<td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid=5">编辑</a></td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var xhr=null
var thr=null
function GetXhr(){
if(XMLHttpRequest){
var Xh = new XMLHttpRequest();
}else{
Xh = new ActiveXObject('Microsoft.XMLHTTP');
}
return Xh
} function call_func(){
if(xhr.readyState == 4){
var data=xhr.responseText;
var ret_dict = JSON.parse(data);
if(ret_dict.status){
//登录成功
alert("删除成功")
thr.parentElement.parentElement.remove()
}
}
} function XhrPostRequest(ths){
thr=ths
xhr=GetXhr();
xhr.onreadystatechange = call_func;
var id=thr.parentElement.parentElement.childNodes[0].textContent;
xhr.open('get','/del_student.html?nid='+id);
xhr.send();
}
</script>
关于更多信息，以及jquery中ajax使用可以参考
更多请看：原生ajax中get和post请求
更多请看：http://www.cnblogs.com/yuanchenqi/articles/5997456.html
>这里
原生ajax中get和post请求的更多相关文章
- Django框架 之 基于Ajax中csrf跨站请求伪造
Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({ data: {csrfmiddlewaretoken: ...
- ajax中Post和Get请求方式的区别？
ajax中Post和Get请求方式的区别: 1.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示. 2.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的 ...
- AJax中post与get请求注意事项
在使用ajax提交表单时,一定要区分提交按钮的形式和数据表头的设置,实例如下: GET请求: HTML代码: <!doctype html> <html lang="en& ...
- ajax中的setRequestHeader设置请求头
1.问题引发点: 前不久发现一个问题: 前端并没有设置请求头信息里面的Accept-Encoding:gzip...但是在请求头中可以明显的看到Accept-Encoding:gzip, deflat ...
- 资料汇总--Ajax中Put和Delete请求传递参数无效的解决方法（Restful风格）【转】
开发环境:Tomcat9.0 在使用Ajax实现Restful的时候,有时候会出现无法Put.Delete请求参数无法传递到程序中的尴尬情况,此时我们可以有两种解决方案:1.使用地址重写的方法传递参数 ...
- Ajax中Put和Delete请求传递参数无效的解决方法（Restful风格）
本文装载自:http://blog.csdn.net/u012737182/article/details/52831008 感谢原文作者分享 开发环境:Tomcat9.0 在使用Ajax实现R ...
- 原生Ajax发送get、post请求每一步
说明 发送Ajax的请求的核心对象是XMLHttpRequest,因此我们需要了解该对象的相关属性和方法 方法(图一) 属性(图二) 第一步:创建 XMLHttpRequest对象,下面都简写为 xh ...
- 原生ajax中readyState中的含义以及HTTP协议状态码的含义
xmlhttp.readyState的值及解释: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()). 2:请求已发送,正在处理中(通常现在可 ...
- ajax中加上AntiForgeryToken防止CSRF攻击
经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.A ...
随机推荐
- （转）SqlDateTime 溢出。必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:59:59 PM之间
原因: 出现这种问题多半是因为你插入或者更新数据库时,datetime字段值为空默认插入0001年01月01日造成datetime类型溢出. 传给数据库表的时间类型值是null值.这里的null指的是 ...
- PAT 甲级 1044 Shopping in Mars
https://pintia.cn/problem-sets/994805342720868352/problems/994805439202443264 Shopping in Mars is qu ...
- HTTP Client使用总结
1.如果服务器使用HTTPS协议,使用HTTPClient的话,需要配以EasySSLProtocolSocketFactory 2.Tomcat对HTTP的Post和Get请求处理是不一样的.Spr ...
- Linux 下如何知道是否有人在使坏？
在 Linux 下查看用户的行为,不仅仅是网管要做的事,也是开发人员所应该具备的基本技能之一.为什么呢?因为有时其他同事在做一些很消耗资源的事情,比如在编译大型程序,可能会导致服务器变得很慢,从而影响 ...
- Oracle PLSQL 客户端 连接Oracle12.2 出现权限问题的解决办法以及绿色版Oracle客户端的使用.
1. 同事反馈登录最新的oracle12.2 的数据库时登录不上报错: 2. 记得当时查过资料, Oracle 在12.2 增加了客户端连接数据库的加密级别 比较早的oracle客户端比如11.2.0 ...
- Jfrog Artifactory 创建docker 镜像仓库以及 push 镜像到 该仓库.
1. 安装aitifactory 以及 启动 使用30天有效期激活 不在阐述. 2. 登录artifactory username:admin password:password 3. 创建 仓库 在 ...
- sql 数据库(表空间)，用户 相关命令
随便转载,保留出处:http://www.cnblogs.com/aaron-agu/ 查看所有数据库 show databases; 创建新数据库 create datebase dbname:#登 ...
- 对delphi中的数据敏感控件的一点探索
一直对delphi数据敏感控件很好奇,感觉很神奇.只要简单设置一下,就显示和编辑数据,不用写一行代码. 如果不用数据敏感控件,编辑一个表字段数据并保存,我相信应用如下代码. Table1.edit, ...
- 一个想休息的线程：JVM到底是怎么处理锁的？怎么不让我阻塞呢？
我是一个线程,生活在JVM(Java虚拟机)中, 这一段日子过得有些无聊,整个世界似乎只有这一个人,天天忙着执行代码,想休息一下都很难. 我听说人类写的代码中有些特殊的地方,叫做临界区,比如synch ...
- CPK公式
CP:Cp = (USL-LSL)/6σ USL上限值.LSL下限值.σ为产品特性值总体标准差: CPK:Cpk=Cp-|M-μ|/3σ μ为产品特性值的总体均值,σ为产品特性值总体标准差,M為目 ...