正文

原生js实现ajax

weareyoung  2022-02-14  467

关键词：

一般来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？

JQuery提供的Ajax方法：

 1 $.ajax({
 2   url: ,
 3   type: ‘‘,
 4   dataType: ‘‘,
 5   data: {
 6          
 7   },
 8   success: function(){
 9          
10   },
11   error: function(){
12          
13   }
14 })

　　原生js实现Ajax方法：

 1 var Ajax={
 2     get: function (url,fn){
 3         var obj=new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
 4         obj.open(‘GET‘,url,true);
 5         obj.onreadystatechange=function(){
 6             if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState==4说明请求已完成
 7                 fn.call(this, obj.responseText);  //从服务器获得数据
 8             }
 9         };
10         obj.send(null);
11     },
12     post: function (url, data, fn) {
13         var obj = new XMLHttpRequest();
14         obj.open("POST", url, true);
15         obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 设置HTTP头部信息
16         obj.onreadystatechange = function () {
17             if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {  // 304未修改
18                 fn.call(this, obj.responseText);
19             }
20         };
21         obj.send(data);
22     }
23 }

注释：

1,open() 方法需要三个参数:

　第一个参数定义发送请求所使用的方法（GET 还是 POST）。与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

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

　第二个参数规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)。

　第三个参数规定应当对请求进行异步地处理(true（异步）或 false（同步）)。

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

3,onreadystatechange 属性存有处理服务器响应的函数。

4,readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

通过学习对XMLHttpRequest对象又熟悉了一些，哈哈

原生js实现ajax

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Examples</title><metaname="description"content=""><metaname="keywords"content=""><linkhref=""ty 查看详情

原生js实现ajax方法

下面是一个比较完整的Ajaxfunctionajax(){varajaxData={type:arguments[0].type||"GET",url:arguments[0].url||"",async:arguments[0].async||"true",data:arguments[0].data||null,dataType:arguments[0].dataType||"text",co 查看详情

原生js实现ajax请求

...符发送到服务器，然后服务器返回一个搜索建议的列表。原生的Ajax原生的Ajax请求离不开XHR对象，即XMLHttpRequest对象。所有现代浏览器都内建有这个对象。创建整个对象：varx 查看详情

封装原生js实现ajax

1functioncreateXHR(){2if(window.XMLHttpRequest){3//IE7+、Firefox、Opera、Chrome和Safari4returnnewXMLHttpRequest();5}elseif(window.ActiveXObject){6//IE6及以下7varversions=[‘MSXML2.XMLHttp‘,‘Microsoft.XMLHTTP‘ 查看详情

原生js实现ajax

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metanam 查看详情

javascript原生js实现ajax(代码片段)

查看详情

[javascript]原生js实现ajax(代码片段)

一.首先看JQuery提供的Ajax方法： $.ajax(url:,type:‘‘,dataType:‘‘,data:,success:function(),error:function()) 二.原生js实现Ajax方法： varAjax=get:function(url,fn)//XMLHttpRequest对象用于在后台与服务器交换数据var 查看详情

使用原生js实现简单的ajax

Ajax是一种使用javascript内置对象向服务器发送请求/接收响应的技术。它可以再页面已经完全显示出来之后再和服务器进行少量的数据交互，所以可以实现局部内容的刷新。ajax的实现，主要是靠javascript中的内置对象XMLHttpRequest。... 查看详情

原生js实现ajax及ajax的跨域请求

...苏算是JQuery的Ajax了。但是，今天，影子向大家介绍的是原生js的Ajax，及跨域请求。查看详情

原生js实现ajax

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metanam 查看详情

原生js实现ajax的文件异步提交功能图片预览功能.实例

<%--CreatedbyIntelliJIDEA.User:yhDate:2016/12/14Time:17:13TochangethistemplateuseFile|Settings|FileTemplates.--%><%@pagecontentType="text/html;charset=UTF-8"language="java"%><%@includef 查看详情

用原生js实现ajaxjsonp

一、原生js实现ajax$.ajax({url:‘‘,type:‘post‘,data:{name:‘zhaobao‘,age:20},dataType:‘json‘,success:function(data){},error:function(){}})functionajax(options){options=options||{};options.type=(options.type||" 查看详情

javascript实现原生ajax

...到ajax这种功能该如何办呢？下面和大家分享javascript实现原生ajax的方法。实现ajax之前必须要创建一个XMLHttpRequest对象。如果不支持创建该对象的浏览器，则需要创建ActiveXObj 查看详情

ajax_原生ajax写法理解异步请求js单线程+事件队列封装原生ajax

1、原生Ajax　　一定要理解Ajax出现的背景　　Ajax通过url查询后端接口的数据，在前端做数据的解析和局部更新　　1、隐藏帧iframe方式实现页面局部更新---只是为了比较好的用户体验　　　　　访问后台接口数据显示在iframe页面... 查看详情

ajax概述原生js(getpost)的实现及ajax函数封装(代码片段)

文章目录Ajax概述Ajax对象Get、Post请求方式的底层实现Ajax函数的封装Ajax概述传统网站中存在的问题：网速慢的情况下，页面加载时间长，用户只能等待表单提交后，如果一项内容不合格，需要重新填写所有表单... 查看详情

原生js实现ajaxjsonp及dom加载完成事件

一、JS原生Ajaxajax：一种请求数据的方式，不需要刷新整个页面；ajax的技术核心是XMLHttpRequest对象；ajax请求过程：创建XMLHttpRequest对象、连接服务器、发送请求、接收响应数据；下面简单封装一个函数，之后稍作解释ajax({url:"./Test... 查看详情

原生javascript中使用ajax实现异步通信

...身的书写顺序,相反则为同步.以下开始简单介绍一下使用原生JS来如何实现AJAX异步通信第一步:创建一个能够实现异步请求的对象 newXMLHttpRequestvarxhr=newXMLHttpRequest();console.l 查看详情

第110天：ajax原生js封装函数

一、Ajax的实现主要分为四部分：1、创建Ajax对象1//创建ajax对象2varxhr=null;3if(window.XMLHttpRequest){4xhr=newXMLHttpRequest();5}else{6//为了兼容IE67xhr=newActiveXObject(‘Microsoft.XMLHTTP‘);8}2、连接服务器//连接服务器open(方法GET/POST，请求地址，查看详情