ajax请求方法

ajax请求:

1、这里介绍下原生方法:

get方法:
    function getMethod(){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readystate == 4){
                if((xhr.status >=200)&&(xhr.status < 300) || xhr.status == 304){
                    console.log(responseText);
                } else {
                    console.log(‘request was unsuccessful: ‘+ xhr.status);
                }
            }
        };
        xhr.open(‘get‘,‘test.php‘,false);
        xhr.send(null);
    }

post方法:
    function postMethod(){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readystate == 4){
                if((xhr.status == 200)&&(xhr.status < 300)||(xhr.status == 304)){
                    console.log(responseText);
                } else {
                    console.log(‘request was unsuccessful: ‘+ xhr.status);
                }
            }
        };
        xhr.open(‘post‘,‘test.php‘,true);
        xhr.send([text]); // text可有可无
    }
    

open(‘method‘,url,boolean);
  method方法常见为两种:get 和 post,两者区别这里不再讲述;
  url:请求的路径
  boolean:布尔值,false为同步请求,此时js代码会等待服务器响应之后再继续执行;true为异步请求,js继续执行而不必等待响应;

xhr对象的readystate属性,检测当前活动阶段,readystate有4个取值:
  0:未初始化,尚未调用open方法;
  1:启动,已调用open方法,但尚未调用send方法;
  2:发送,已调用send方法,但尚未接收到响应;
  3:接收,已经接收到部分响应数据;
  4:完成,已经接收到全部响应数据,且可以在客户端使用了;

xhr的其它常用属性:
  responseText: 作为响应主体被返回的文本;
  status:响应的http状态
  statusText: Http状态的说明
  responseXML:若响应的内容类型是‘text/xml’或‘application/xml’,这个属性中将保存包含着响应数据的xml dom文档;

2、jquery中方法

   第一种写法: $.ajax({
                    type: ‘post‘,
                    dataType: ‘json‘,
                    url: ‘‘,
                    data: {
                    },
                    success: function(){},
                    error: function(){}
               });
    第二种写法:$.ajax({
                    type: ‘post‘,
                    dataType: ‘json‘,
                    url: ‘‘,
                    data: {},
                    async: false
                }).done(function(resp){

                    console.log(resp);
                // 相当于第一种的success

                }).fail(function(){

                //相当于第一种的error
                });
    第三种写法:
        $.ajax({
            type: ‘post‘,
            dataType: ‘json‘,
            data: {},
            url: ‘‘,
            async: false // 默认是true,异步
        }).then(function(resolve,reject){
        // then 方法组合了done和fail方法;
        });
        

以上后两种jQuery的ajax方法,对jQuery版本有要求,具体可参考jQuery官网

原文地址:https://www.cnblogs.com/wuting/p/9145845.html

时间: 2024-11-08 20:48:29

ajax请求方法的相关文章

通用ajax请求方法封装,兼容主流浏览器

ajax简介 没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面.如果没有AJAX,在youku看视频的过程中如果点击了"顶.踩".评论.评论翻页,页面就会刷新,视频就会被打断.开发一个看效果:用<video src="diaosi.mp4" autoplay controls></video>播放视频(只有支持html5的浏览器能播放),然后放一个"赞"按钮的功能(赞的数量存到数据库),看

jQuery ajax 请求HttpServlet返回[HTTP/1.1 405 Method not allowed]

1.问题使用jQuery的ajax请求 Servlet 时,返回没有进入ajax的success回调函数,浏览器控制台显示 [HTTP/1.1 405 Method not allowed]. 2.解决方法网上调查,大多都是如下解释 Apache.IIS.Nginx等绝大多数web服务器,都不允许静态文件响应POST请求,否则会返回“HTTP/1.1 405 Method not allowed”错误. 即,将出错页面表单的method=“post”改为“get”即可 改了 ajax 请求方法,

MVC + AJAX请求失败的问题

以前的工作都是后台的开发,对于ajax也是一知半解,今天遇到一个问题折腾了许久,吐血解决.. 前台代码: 后台代码: 问题描述: 用火狐浏览器调试的时候  每次执行到SUCCESS:function(data)就回跳回 33行,用IE10或者chrome浏览器调试的时候 是不会执行$.AJAX(){},直接跳过ajax 解决方案:(吐血了) 服务 -> "ASP.NET状态服务" 开启 搜了许多解决方案,学习了很多 原文地址:http://jingyan.baidu.com/al

jQuery发送ajax请求三种方式

<button>点击发送ajax get请求</button> <button>点击发送ajax post请求</button> <button>点击发送通用的ajax请求</button> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="te

js封装ajax的方法

常用的ajax请求方法封装 /** * ajax请求的封装代码 */ function ajaxPost(url, params, cb) { $.ajax({ type : 'post', url : url, data : params, cache : false, success : function(data) { cb(data); }, error : function(err) { alert("服务器异常"); } }); } function ajaxGet(url

客户端ajax请求为实现Token验证添加headers后导致正常请求变为options跨域请求解决方法

客户端为了实现token认证,通过Jquery的ajaxSetup方法全局配置headers: 全局配置headers后会导致部分不需要token认证的请求变为options请求,导致跨域访问.报错信息如下: CORS概念 支持CORS请求的浏览器一旦发现ajax请求跨域,会对请求做一些特殊处理,对于已经实现CORS接口的服务端,接受请求,并做出回应. 有一种情况比较特殊,如果我们发送的跨域请求为"非简单请求",浏览器会在发出此请求之前首先发送一个请求类型为OPTIONS的"

js实现无刷新表单提交文件,将ajax请求转换为form请求方法

最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的问题. 一.无刷新实现form提交文件 将form的target指向为一个iframe就可以实现无刷新提交文件了,但关键是还需要看到后台返回的数据,所以还需要为该iframe注册一个回调函数,因为iframe和该页面在同域内,所以可以在iframe里可以调用该回调函数,就可以看到后台返回的数据了.实

AJAX请求 $.ajax方法的使用

AJAX请求 $.ajax方法的使用 使用jQuery的$.ajax方法可以更为详细的控制AJAX请求.它在AJAX请求上施加细粒度级别的控制. $.ajax方法语法 $.ajax(options) 参数   options (对象)一个对象的实例,其属性定义这个操作的参数.详情见下表. 返回值 XHR实例 options详细范围值 名称 类型 描述 url 字符串 请求的url地址 type 字符串 将要使用的HTTP方法.通常是POST或GET.如果省略,则默认为GET data 对象 一个

js方法内Ajax请求数据判断,验证无效(OnClientClick=&quot;return Method();&quot;),还是直接执行后台代码

function CheckAdd() { var flag = true; $.ajax({ cache: false, async: false, url: "/ajaxpage/getajax.aspx?t=adjserviceclientlist&Cellphone=" + Cellphone + "&a=" + Math.random(), dataType: 'json', success: function (data) { if (d