ajax纯js封装函数

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 不是新的编程语言，而是一种使用现有标准的新方法。是7种技术的综合,它包含了七个技术(javascript xml xstl xhtml dom xmlhttprequest , css), ajax 是一个粘合剂。

直接上程序：

js调用部分：

<script src="ds.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    window.οnlοad=function(){var oDs=document.getElementById('ds');var oText=document.getElementById('text');oDs.οnclick=function(){//第一个参数：数据传输方式 get  post//第二个参数：调用文件的路径//第三个参数：data//第四个参数：回调函数ajax('GET','aa.txt','',function(str){//此处是调用名字为aa的txt文件里所有的内容(str)，所以data直接为''//如果需要插入特定参数,则data值为 data='&name='+oText.value;console.log(str);//名字为aa的txt文件里所有的内容});}}
</script>

html部分：

<input type="button" name="ds" id="ds" value="弹出" />
<input type="text" value="" id="text"/>

ajax封装部分：

function ajax(method, url, data, fnsuccess) {var xhr;//1.创建对象，兼容问题if(window.XMLHttpRequest) {//在高版本的浏览器 IE7+xhr = new XMLHttpRequest();//XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。} else {//IE5 IE6xhr = new ActiveXObject();}//2.发送请求//第一个参数：数据传输方式 get post//第二个参数：处理文件 xx.php xx.txt ，要数据：直接写路径就好；提交数据：在地址那里写数据（get方式）//第三个参数：同步或者异步方式，默认是异步true//open//get模式路径上同时加入需要传输的内容if(method == 'GET' && data) {url = url + '?' + data;}xhr.open(method, url, true);//send//send()如果是get方式，写null或者为空；//如果是post，参数那就直接写要传输的内容if(method == 'GET') {xhr.send(null);} else {//创建头文件信息xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send(data);}//4.接受php传过来的数据，解析 dom操作xhr.onreadystatechange = function() {if(xhr.readyState == 4) {//响应过程状态信息，4代表发送完成，顺利返回信息if(xhr.status == 200) {//status:状态码，如果返回的信息是200fnsuccess && fnsuccess(xhr.responseText);} else {alert(xhr.status);//发生错误时，返回该状态码}}}
}

表单验证，用户名验证：

<form action="checkName.php" method="post"><!--span标签是用于提示，用户名重复，以及可以注册-->用户名：<input type="text" id="username" /><span id="inf"></span><br />密码：<input type="password" /><br /><input type="button" id="submit" value="提交" />
</form>

js调用部分：

<script src="ds.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">window.onload = function() {var oUsername = document.getElementById('username');var oInf = document.getElementById('inf');oUsername.onkeyup = function() {var data='&name=' + oUsername.value;//路径连接的是php文件ajax('GET','/0322/test/checkName.php',data,function(str){oInf.innerHTML=str;});}}
</script>

php部分：

<?php
//  echo 输出
//  echo 'qwerrtty';
//3.获取ajax传来的信息，做处理，在返回给ajax：后台做或者后台协作。
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header("Content-Type: text/xml;charset=utf-8");//告诉浏览器不要缓存数据header("Cache-Control: no-cache");
//返回xml txt json html$userName=$_GET['name'];if($userName=='admin'){//把内容拿到，进行判断echo '<result><mes>该用户名重复了</mes></result>'; }else{echo '<result><mes>该用户名可以注册</mes></result>';}?>

ajax纯js封装函数相关推荐

纯js封装一个多功能弹出框
不借助其它的css代码和图片资源,可直接调用. 原创内容,请勿转载. 注意,不要直接复制文章里的封装代码,因为编辑器的原因,无论怎么编辑,它还是给修改了代码.文末提供了封装代码的下载地址(无需积分) ...
纯js封装一个无缝轮播
下面的代码用纯js封装一个轮播组件.功能如下: 可上滑.下滑.左滑.右滑.无缝轮播. 移动端支持手势滑动. 可指定第一个显示的轮播图. 支持放置文字.图片和视频.带导航器. 导航器可自定义样式.若不想 ...
关于js封装函数的一些东西
关于封装函数,函数封装是一种函数的功能,它把一个程序员写的一个或者多个功能通过函数.类的方式封装起来,对外只提供一个简单的函数接口.当程序员在写程序的过程中需要执行同样的操作时,程序员(调用者)不需要 ...
js封装函数_JavaScript基础-如何封装函数来改变元素的位置
点击右上方红色按钮关注"小郑搞码事",每天都能学到知识,搞懂一个问题! 大家好!我是/小郑搞码事/的小郑今天给大家分享JavaScript的基础知识-改变元素的位置. 没错,用J ...
js ajax 访问java函数,将url分配给Java EE项目中的ajax（js）函数
我正在Ajax中尝试使用我的第一个项目,并且在分配指向要从服务器中获取的文件的绝对URL时遇到问题.将url分配给Java EE项目中的ajax(js)函数这是我的函数: function fetc ...
JS:封装函数判断数据类型
思路 1 ).根据 typeof() 的返回值将数据分为2种情况 a.返回值为 'string' 'number' 'boolean' 'undefined' 'function' (直接返回 typ ...
用js封装函数自定义一个数字列表，元素为10个,找出列表中最大数连同下标一起输出
num_arr = [34,6,546,5,100,16,77,56,88,10]; // 找最大值思路同上 // 注意的事项需要拿一个变量存一下下标 // 因为我们拿到的结果是在循环结束以后 ...
js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
js进阶ajax函数封装（匿名函数作为参数传递）（封装函数引入文件的方式非常好用）...
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递二.js进阶ajax函数封装 ajax1.js 1 function ajax( ...

ajax纯js封装函数

表单验证，用户名验证：

ajax纯js封装函数相关推荐

最新文章

热门文章