Ajax请求

作者: 墨马 | 来源:发表于2017-09-07 23:07 被阅读69次

原生Ajax请求

一、创建XMLHttpRequest对象

var xhr = null;
if(window.XMLHttpRequest){//标准浏览器
    xhr = new XMLHttpRequest();
}else{//早期的IE浏览器
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

二、准备发送请求-配置发送请求的一些行为

xhr.open('get','text.php',true);

第一个参数:请求方式
第二个参数:请求文件
第三个参数: 默认为true表示异步请求

第三步:执行发送的动作

xhr.send(null);

get请求方式发送为空
post发送需要发送到服务器的内容

第四步:指定回调函数

xhr.onreadystatechange = function(){          
    if(xhr.readyState == 4){                  
        if(xhr.status == 200){//请求事成功的        
            var data=xhr.responseText;//json               
        }                                     
    }                                         
     console.log("状态t"+xhr.readyState);       
}

xhr.readyState的返回值和对应含义
0.对象创建
1.准备好发送,还没发
2.已经发送完毕
3.服务器已返回数据
4.返回的数据已可以使用
xhr.status的返回值及含义

代码 说明
2xx 成功
3xx 重定向
4xx 请求错误
5xx 服务器错误
var url = '05open.php?username='+ encodeURIComponent(username) +'&password='+password;

encodeURIComponent(username)防止用户名中有汉字出现乱码

jQuery方法的Ajax请求

首先引入jQuery库

$.ajax({                    
    url:"text.php",         
    dataType:"json",        
    type:"post",            
    data:null,              
    success:function(data){ 
        setcontent(data);   
        console.log(data);  
    },                      
    error:function(e){      
        console.log(e);     
    }                       
});                                                                                                  
参数 含义
url 请求的服务器文件
dataType 要求返回的数据类型
type 请求方式
data 传送给服务器的数据
success:function(data){ } 请求成功执行的函数
error:function(e){ } 请求失败执行的函数

data服务器返回的数据
e错误代码
data的书写格式
data:{name:"myName",id:1},

相关文章

  • ajax

    Ajax 1 - 请求纯文本 Ajax 2 - 请求JSON数据 Ajax 3 - 请求Github接口 Ajax...

  • ajax

    特点 ajax ajax入门 ajax请求与发送数据 ajax工具类封装 type:请求类型url:请求地址dat...

  • 2016-08-18 短信接口、ajax请求

    短信接口、ajax请求 ajax请求 $.ajax()方法详解 url type timeout: async: ...

  • HTML5权威指南 | 第五部分 高级功能

    三十二、使用AJAX(上) Ajax起步: 使用Ajax事件: Ajax请求的错误处理: 中止Ajax请求: 三十...

  • 链接

    javascript ajax get 请求 post请求 jqery ajax websocket

  • 用get、post方式发送ajax请求

    get方式发送ajax请求 post方式发送ajax请求

  • jquery AJAX方法

    $ajax()执行异步 AJAX 请求 $.ajaxSetup()为将来的 AJAX 请求设置默认值 $.get(...

  • 使用promise封装ajax请求

    封装一个ajax请求方法: 调用ajax方法,发送请求

  • Promise解析

    Promise使用场景 回调地狱:当你发送一个ajax请求,继而又需要请求一个ajax请求,并且此ajax请求参数...

  • jQuery+Ajax

    Ajax Ajax-HTTP请求 XMLHttpRequest发送请求 XMLHttpRequest取得响应 JS...

网友评论

    本文标题:Ajax请求

    本文链接:https://www.haomeiwen.com/subject/hmewjxtx.html