【JS数据交互-Ajax相关知识(一)】

JQuery提供的Ajax方法:

$.ajax({
    url: ,
    type: ‘‘,
    dataType: ‘‘,
    data: {

    },
    success: function(){

    },
    error: function(){

    }
 })

原生js实现Ajax方法:

var Ajax={
    get: function(url, fn) {
        var obj = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据
        obj.open(‘GET‘, url, true);
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState == 4说明请求已完成
                fn.call(this, obj.responseText);  //从服务器获得数据
            }
        };
        obj.send();
    },
    post: function (url, data, fn) {         // datat应为‘a=a1&b=b1‘这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
        var obj = new XMLHttpRequest();
        obj.open("POST", url, true);
        obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 添加http头,发送信息至服务器时内容编码类型
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {  // 304未修改
                fn.call(this, obj.responseText);
            }
        };
        obj.send(data);
    }
}

注释:

1. open(method, url, async) 方法需要三个参数:

  method:发送请求所使用的方法(GET或POST);与POST相比,GET更简单也更快,并且在大部分情况下都能用;然而,在以下情况中,请使用POST请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

 url:规定服务器端脚本的 URL(该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务));

 async:规定应当对请求进行异步(true)或同步(false)处理;true是在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理;false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange:存有处理服务器响应的函数,每当 readyState 改变时,onreadystatechange 函数就会被执行。

4. readyState:存有服务器响应的状态信息。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

5. responseText:获得字符串形式的响应数据。

6. setRequestHeader():POST传数据时,用来添加 HTTP 头,然后send(data),注意data格式;GET发送信息时直接加参数到url上就可以,比如url?a=a1&b=b1。

原文地址:https://www.cnblogs.com/lizeren/p/8378714.html

时间: 2024-10-09 12:35:55

【JS数据交互-Ajax相关知识(一)】的相关文章

JS学习之ajax相关知识和ajax的封装

XMLHttpRequest对象 1. XMLHttpRequest用于在后台与服务器交换数据,是AJAX之所以能对网页进行局部刷新的核心,同时Ajax技术离开了XMLHttpRequest对象将失去与服务器异步通信的能力. 2:不同的浏览器创建XMLHttpRequest对象使用的语句是不同的. 3:3.XMLHttpRequest对象方法与属性 方法 描述 open(method,url,[async],[username],[password]) 规定请求的类型.URL 以及是否异步处理请

Python 数据分析(二 本实验将学习利用 Python 数据聚合与分组运算,时间序列,金融与经济数据应用等相关知识

Python 数据分析(二) 本实验将学习利用 Python 数据聚合与分组运算,时间序列,金融与经济数据应用等相关知识 第1节 groupby 技术 第2节 数据聚合 第3节 分组级运算和转换 第4节 透视表和交叉表 第5节 时间序列 第6节 日期的规范.频率以及移动 第7节 时区处理 第8节 时期及算术运算 第9节 重采样及频率转换 第10节 时间序列绘图 groupby 技术 一.实验简介 Python 数据分析(二)需要同学们先行学完 Python 数据分析(一)的课程. 对数据集进行分

浅谈混合开发与Android,JS数据交互

本文是作者原创,如转载请注明出处! 一.概论 现在时代已经走过了移动互联网的超级火爆阶段,市场上移动开发人员已经趋于饱和,显然,只会原生APP的开发已不能满足市场的需求,随着H5的兴起与火爆,H5在原生APP中的使用越来越广泛,也就是我们常说的混合开发(Hybrid APP).最新很火的微信小程序相信大家都是知道的,实际上微信小程序加载的界面就是一个HTML5的界面,HTML5界面在一些电商类的APP中主要承担展示数据的作用,但是他的作用并不仅限于此,最起码js调用原生方法和原生调用js的方法是

又一个php与js数据交互的例子

php和js如何通过json互相传递数据相关问题探讨 作者: 字体:[增加 减小] 类型:转载 json是js的一种数据格式,可以直接被js解析,php无法直接读取json数据,但是php提供了json_decode函数来对json数据进行转化,从而可以被php脚本访问,今天,站长就和大家一起来探讨这个问题,感兴趣的你可以参考下哦 当我们在结合php和javascript实现某些功能时,经常会用到json.json是js的一种数据格式,可以直接被js解析.而php无法直接读取json数据,但是p

大数据的一些相关知识介绍

什么是大数据 大数据(big data),指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需要新处理模式才能具有更强的决策力.洞察发现力和流程优化能力的海量.高增长率和多样化的信息资产. 大数据的定义是4Vs:Volume.Velocity.Variety.Veracity.用中文简单描述就是大.快.多.真. Volume -- 数据量大 随着技术的发展,人们收集信息的能力越来越强,随之获取的数据量也呈爆炸式增长.例如百度每日处理的数据量达上百PB,总的数据量规模已经到达E

数据交互 ajax代码整理

修改状态 /*用户提现*/ function extract(){ var myUserID=""; myUserID=uidList.substr(0,uidList.length-1); console.log(myUserID); var myData = { gainIdStr:myUserID, userId:userId//用户ID }; $.ajax({ url:Constants.hostIp+"/XXX", type: "post&quo

数据交互 - Ajax初体验

2016-10-22 12:22:42 相关概念 AJAX(Asynchronous Javascript And XML)即"异步JavaScript和XML": 是指一种实现客户端和服务器的数据传递的网页开发技术: 核心:局部刷新,异步加载: 即"在不需要刷新页面的情况下,就可以与Web服务器交换数据,产生局部刷新的效果". 基础步骤 第一步 :先创建AJAX对象 1 /*兼容处理*/ 2 var xhr; //声明AJAX对象变量 3 if(window.XM

JQuery的ajax方法获取返回值得到了值还包含了不要的html源码 (Ajax相关知识)

因为后台使用了response.Write():这个方法,当输出完了以后,没有结束掉会继续输出,所以需要用到response.End():这样问题就解决了 jquery的ajax 除了通过url传值,后台用respon.querystring[""]来获取 还可以通过data 中的数据 传值,后台用respon.Form[""]来获取

数据交互 ajax 初始化省

1 //初始化省 2 function initProvince() { 3 if( areaLvel == 0 ) { 4 return; 5 } 6 // 清空option 7 $("#select_province").html(''); 8 9 $.ajax({ 10 type: 'GET', 11 url: '/path/to/file', 12 dataType: 'json', 13 contentType: "application/json;charset=