搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > Crystal的加糖日记 > Ajax详细使用步骤

Ajax详细使用步骤

Crystal的加糖日记 2020-06-29



AJAX使用




0 1

一、原生JS中的Ajax


第一步:创建异步对象

var xhr = new XMLHttpRequest();


第二步:设置 请求行 open(请求方式,请求url):

// get请求如果有参数就需要在url后面拼接参数,

// post如果有参数,就在请求体中传递 xhr.open("get","validate.php?username="+name)

xhr.open("post","validate.php");


第三步:设置请求(GET方式忽略此步骤)头:setRequestHeader()

// 1.get不需要设置

// 2.post需要设置请求头:Content-Type:application/x-www-form-urlencoded

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");


第四步:设置请求体 send()

// 1.get的参数在url拼接了,所以不需要在这个函数中设置

// 2.post的参数在这个函数中设置(如果有参数)

xhr.send(null) xhr.send("username="+name);


第五步:让异步对象接收服务器的响应数据

// 一个成功的响应有两个条件:1.服务器成功响应了 2.异步对象的响应状态为4(数据解析完毕可以使用了)

xhr.onreadystatechange = function(){ 

if(xhr.status == 200 && xhr.readyState == 4){ 

 console.log(xhr.responseText);

 }

ajax-get方式请求案例:

var xhr = new XMLHttpRequest();

xhr.open("get","validate.php?username="+name);

xhr.send(null);

xhr.onreadystatechange = function(){

if(xhr.status == 200 && xhr.readyState == 4){ console.log(xhr.responseText); document.querySelector(".showmsg").innerHTML = xhr.responseText;;

 }

 }


ajax-post方式请求案例:

var xhr = new XMLHttpRequest();

xhr.open("post","validate.php");

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send("username="+name);

xhr.onreadystatechange = function(){

// 判断服务器是否响应,判断异步对象的响应状态

if(xhr.status == 200 && xhr.readyState == 4){

 document.querySelector(".showmsg").innerHTML = xhr.responseText;

 }

 }


0 2

二、Jquery中的Ajax


$.ajax({

 type:"get",// get或者post

 data:{},//请求的参数

 dataType:"json",//json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了 

 timeout:3000,//3秒后提示错误

 beforeSend:function(){ 

 // 发送之前就会进入这个函数

 // return false 这个ajax就停止了不会发 如果没有return false 就会继续

 },

 success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果

 },

 error:function(){//失败的函数

 },

 complete:function(){//不管成功还是失败 都会进这个函数

 }

})

// 常用

$.ajax({

 type:"get",

 url:"",

 data:{},

 dataType:"json",

 success:function(data){

 }

})

$.ajax() 都可以发

$.post(url,data,success,datatype):本质上只能发送post请求

$.get(url,data,success,datatype):本质上只能发送get请求


温故知新




一起学习吧~




版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《Ajax详细使用步骤》的版权归原作者「Crystal的加糖日记」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注Crystal的加糖日记微信公众号

Crystal的加糖日记微信公众号:gh_2ada5b60715f

Crystal的加糖日记

手机扫描上方二维码即可关注Crystal的加糖日记微信公众号

Crystal的加糖日记最新文章

精品公众号随机推荐

下一篇 >>

Tom,Tomcat,Top Gun