原生javaScript实现Ajax 和 jQuery实现Ajax

ssshooter 发布于2019-08-23 17:03 / 3237人阅读

摘要：作者后台使用的是语言，所以这里以后台为例子不影响学习一原生使用方法创建对象兼容处理处理低版本不兼容问题准备发送请求方式接口参数名参数值异步执行发送回调是表示数据解析完成，后台处理完成了。是表示处理的结果是的。

作者后台使用的是php语言，所以这里以php后台Api为例子,不影响学习Ajax

一、 javaScript原生使用Ajax 1.get方法

//1.创建对象 兼容处理
var xhr = null;
//处理低版本IE不兼容问题
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.准备发送 请求方式  接口    参数名    参数值        异步
xhr.open("get","xxx.php?username=" + usernameValue ,true);
//3.执行发送
xhr.send(null);
//4.回调
xhr.onreadystatechange = function () {
    /*xhr.readyState == 4  是表示数据解析完成，后台处理完成了。
       xhr.status == 200 是表示处理的结果是OK的。响应成功*/
    if (xhr.readyState == 4){
        if(xhr.status == 200){
            //返回结果
            var result = xhr.responseText;
            console.log(result); 
        }
    }
};

2.post方法

//#1.创建对象 兼容性
var xhr = null;
//处理低版本IE不兼容问题
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
//#2.准备发送
xhr.open("post","xxx.php",true);
// 参数
var param = "phone=" + phoneValue;
//设置响应头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//#3.执行发送
xhr.send(param);

//#4.回调函数
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){
        if(xhr.status ==200){
            var result = xhr.responseText;
            console.log(result);
        }
    }
}

open()方法后面的参数true和false,表示异步和同步，同步(false)就是先吃完饭才能看电视，异步(true)就是边吃饭边看电视**

二、 jQuery中的使用Ajax 1.基本使用方法

$.ajax({
    url: "xxx.php",
    type: "get",
    beforeSend: function(xhr){
        console.log(xhr);
    },
    success: function (res) {
        console.log(res);
    },
    error:function (xhr) {
        console.log(xhr);
    },
    complete:function (xhr) {
        console.log(xhr);
    }
});

post方式只需把type值改成 get就行

2.快捷方式

$.get("xxx.php",{id:1},function (res) {
    console.log(res);
});

$.post("xxx.php",{id:1},function (res) {
    console.log(res);
});

以上是get和post两种方式

3.解析Json格式

$.getJSON("xxx.php",{id:1},function (res) {
    console.log(res);
});

或者在放置json格式文件的php中进行申明头部

 "张三",
    "age"  => 18
);
//格式
header("Content-Type:application/json");
echo json_encode($zhangsan);
?>

云服务器 GPU云服务器 ajax原生js实现原生js实现ajax Ajax实现机制 get实现ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103731.html

原生JS与jQuery对AJAX的实现

摘要：原生与对的实现一定义里这么解释异步的和。二原生实现所有现代浏览器以及均内建对象。一般是正常未找到页面，一般是错误，或者后台没有创建相应的内部服务错误，多为后台错误。基本上通过发送的数据及传回的数据就能定位问题所在了。原生JS与jQuery对AJAX的实现一、定义 W3C里这么解释AJAX： AJAX = Asynchronous JavaScript and XML（异步的 Jav...

Chaz 2019-08-21 10:37 评论0 收藏0
原生JavaScript实现AJAX、JSONP

摘要：在这里讲解一下用原生如何实现。当然，前面也说过，你可以给定固定回调函数名最后我已经将和请求合并在一起了，下载链接原文链接原生实现如有问题，欢迎在下方留言相信大多数前端开发者在需要与后端进行数据交互时，为了方便快捷，都会选择JQuery中封装的AJAX方法，但是有些时候，我们只需要JQuery的AJAX请求方法，而其他的功能用到的很少，这显然是没必要的。其实，原生JavaScript...

xcc3641 2019-08-20 14:06 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
分别使用 XHR、jQuery 和 Fetch 实现 AJAX

摘要：本文详细讲述如何使用原生和来实现。使用可以无刷新地向服务端发送请求接收服务端响应，并更新页面。分别要用到的方法和方法。，，都是现在和未来解决异步的标准做法，可以完美搭配使用。这也是使用标准一大好处。本文详细讲述如何使用原生 JS、jQuery 和 Fetch 来实现 AJAX。 AJAX 即 Asynchronous JavaScript and XML，异步的 JavaScript...

Julylovin 2019-08-21 11:24 评论0 收藏0