基于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 相关文章推荐
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
javascript中万恶的function实例分析
May 25 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 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
域名查询代码公布
2006/10/09 PHP
php下实现折线图效果的代码
2007/04/28 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
javascript中的if语句使用介绍
2013/11/20 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
javascript几个易错点记录
2014/11/26 Javascript
JavaScript闭包详解
2015/02/02 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
python实现单向链表详解
2018/02/08 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
eclipse创建python项目步骤详解
2019/05/10 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
办公室助理岗位职责
2013/12/25 职场文书
劳动之星获奖感言
2014/02/01 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
企业环保标语
2014/06/10 职场文书
北大自主招生自荐信
2015/03/04 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python