基于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 contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 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 gzip压缩输出的实现方法
2013/04/27 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php图片上传类 附调用方法
2016/05/15 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
Vue.js组件高级特性实例详解
2018/12/24 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
Python线性回归实战分析
2018/02/01 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
python实现在线翻译
2020/06/18 Python
序列化Python对象的方法
2020/08/01 Python
美国糖果店:Sugarfina
2019/02/21 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
毕业生求职推荐信
2013/11/04 职场文书
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
新生入学欢迎词
2015/01/26 职场文书
碧霞祠导游词
2015/02/09 职场文书
门卫岗位职责
2015/02/09 职场文书
演讲比赛主持词
2015/06/29 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书