原生js使用ajax
AJAX 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容（默认是异步）
（1）使用ajax会用到XMLHttpRequest()对象
（2）然后使用open方法定义请求方法和请求地址，参数格式open（‘请求方法’，‘请求地址’），请求方法有两种，get和post
（3）然后使用send方法定义传输数据，参数格式send（传输数据）
其中请求后台后会得到响应结果，可以通过onreadystatechange状态事件来监测，其中readyState属性一共有四个状态码：
下面是ajax用get的简单例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax-get</title>
<script>
function checkname() {
var name=document.getElementById('username').value;
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () {
if (xhr.readyState==4){
alert(xhr.responseText);
}
};
xhr.open('get','get.php?name='+name);
xhr.send(null);
}
</script>
</head>
<body>
<div style="width: 400px;margin: 0 auto">
<h1>输入内容后离开鼠标</h1>
<p>用户名：<input type="text" id="username" onblur="checkname()"></p>
</div>
</body>
</html>
这是get.php代码
print_r($_GET);
下面是ajax使用post的简单例子，这里需要另外加上setRequestHeader("content-type","application/x-www-form-urlencoded")，用来设置请求头信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax-post</title>
<script>
function checkname() {
var nam=document.getElementById('username').value;
var info="name="+nam; var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () { //四个请求返回状态
if (xhr.readyState==1){
console.log(1);
}
if (xhr.readyState==2){
console.log(2);
}
if (xhr.readyState==3){
console.log(3);
}
if (xhr.readyState==4){
console.log(4);
alert(xhr.responseText);
}
};
xhr.open('post','post.php');
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(info);
}
</script>
</head>
<body>
<div style="width: 400px;margin: 0 auto">
<h1>输入内容后离开鼠标</h1>
<p>用户名：<input type="text" id="username" onblur="checkname()"></p>
</div>
</body>
</html>
这是post.php代码
print_r($_POST);
常说的ajax轮询
就是通过setInterval定时器每段时间执行一次，一直循环，函数使用例子为：
setInterval(执行函数,每次执行间隔时间)
而settimeout是在指定的时间后执行，但只执行一次，函数使用例子为：
settimeout(执行函数,距离执行间隔时间)
原生js使用ajax的更多相关文章
- 原生js实现Ajax
一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...
- 使用原生js写ajax
// 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
- 原生JS的Ajax技术
1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...
- 原生js中用Ajax进行get传参
原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 原生js实现ajax与jquery的ajax库，及json
这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...
- 用原生js实现ajax、jsonp
转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...
- 原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...
- 原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
随机推荐
- RAID基本知识
RAID是英文Redundant Array of Independent Disks(独立磁盘冗余阵列),简称磁盘阵列.下面将各个级别的RAID介绍如下. 一.为什么使用Raid? 1.对磁盘高速存 ...
- Dubbo实践（四）设计模式
Dubbo框架在初始化和通信过程中使用了多种设计模式,可灵活控制类加载.权限控制等功能. 工厂模式 Provider在export服务时,会调用ServiceConfig的export方法.Servi ...
- 在 S5PV210 的 开发板上 使用 串口 收发信息
参考学习教程:周立功嵌入式Linux开发教程-(上册) 材料:首先 准备一个 安装好 Linux 的 开发板 使用 xshell 工具 连接 开发板 ,winscp 工具 连接 开发板 , 准 ...
- Vcenter虚拟化三部曲----SQL Server 2008 R2 数据库安装
操作系统 Windows server 2008 R2 数据库 SQL Server 2008 R2 注意:SQL Server 2008 R2需要操作系统首先安装.NET Frame ...
- 2019年，200道面试题打造最受企业欢迎的iOS程序猿！
在2018年底,小编混迹在各种iOS交流群中,整理出了将近两百道大厂最喜欢在面试问到的问题,今天在这里分享给大家[免费获取方式在最后]! 小编就不在 ...
- [iOS]被忽略的main函数
如同任何基于C的应用程序,程序启动的主入口点为iOS应用程序的main函数.在iOS应用程序,main函数的作用是很少的.它的主要工作是控制UIKit framework.因此,你在Xcode中创建任 ...
- list 去重复元素
public static List removeDuplicate(List list){ List listTemp = new ArrayList(); for(int i=0;i<lis ...
- 设计一个学生类&班级类
第一题 设计一个学生类 属性:姓名.学号.年龄.成绩 设计一个班级类要求:实现向班级中添加学生.删除学生.查看学生.按照指定条件排序 属性:班级代号,所有学生 需要使用 calss, __int__, ...
- 从Windows复制文件到Linux
PuTTY自带的pscp非常好用. 使用方式和Linux中的scp命令很像,格式如下: pscp 文件 用户名@LinuxIP:目录 例如: pscp d:/a.iso root@192.168.1. ...
- 前端基础-jQuery的优点以及用法
一.jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...