基于js原生和ajax的get和post方法以及jsonp的原生写法实例


Posted in Javascript onOctober 16, 2017
login.onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost/ajax2/test2.php?username="+username.value+"&pwd="+pwd2.value,true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if (xhr.status>=200 && xhr.status<300) {
alert(xhr.responseText);
};
};
}
}

ajax方法

btn.onclick = function(){
ajax(
    "GET",
    "http://localhost/ajax2/my02.php",
    {xingming:xingming.value,pwd:pwd.value},
    function(data){
console.log(data);
},
function(errCode){
console.log(errCode);
}
)

post方法传参

它与个get方法的区别:

01 安全型。post更安全。

02 速度. get的速度快

03 数量级。 post的数量级更大一些.

具体实现:

var xhr = new XMLHttpRequest();
xhr.open("post","http://localhost/ajax2/login2.php",true);
var data = {
username:username1.value,
pwd:pwd1.value
}
// 设置请求头 告诉服务器发给他的数据是json格式
xhr.setRequestHeader("content-type","application/json");
xhr.send( JSON.stringify(data) );
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if ( xhr.status >= 200 && xhr.status < 300 ) {
alert(xhr.responseText);
};
};
}

原生jsonp 方法

var sc = document.createElement("script");
sc.type = "text/javascript";
document.body.appendChild(sc);
sc.src = "http://localhost/ajax2/jsonp.php?cb=myCallBack";

function myCallBack(data){
console.log(data);
}

以上这篇基于js原生和ajax的get和post方法以及jsonp的原生写法实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
javascript中的有名函数和无名函数
Oct 17 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
vue实现菜单切换功能
May 08 Javascript
JS实现简单的表格增删
Jan 16 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
公众号SVG动画交互实战代码
May 31 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 #Javascript
angular4中关于表单的校验示例
Oct 16 #Javascript
原生JS实现小小的音乐播放器
Oct 16 #Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 #Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 #Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 #jQuery
You might like
php 特殊字符处理函数
2008/09/05 PHP
phalcon框架使用指南
2016/02/23 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
升学宴主持词
2014/04/02 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
根叔历年演讲稿
2014/05/20 职场文书
运动会广播稿100字
2014/09/14 职场文书
软件测试专业推荐信
2014/09/18 职场文书
2014年档案室工作总结
2014/12/01 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
行政申诉状范文
2015/05/20 职场文书
单位工资证明范本
2015/06/12 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书