JavaScript中的ajax功能的概念和示例详解

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）。

个人理解：ajax就是无刷新提交，然后得到返回内容。

对应的不使用ajax时的传统网页如果需要更新内容（或用php做处理时），必须重载整个网页页面。

示例：

html代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax示例</title>
<style>
#loginForm {
border-collapse: collapse;
}
#loginForm,#loginForm td {
border:#550 1px solid;
text-align:center;
}
</style>
</head>
<body>
<table id="loginForm">
<tr>
<td>用户名：</td>
<td><input type="text" id="userName"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="password"/></td>
</tr>
<tr>
<td colspan=2><input id="submitBtn" type="submit" value="ajax提交"/></td>
</tr>
</table>
<script type="text/javascript" language="javascript">
document.getElementById('submitBtn').addEventListener('click', clickSubmit);
function clickSubmit() {
makeRequest('./test.php');
}
var req = false;
/**
* 创建ajax请求
* url 处理请求的php位置
*/
function makeRequest(url) {
req = false;
//创建一个XMLHTPP实例
if (window.XMLHttpRequest) { // ie9以上和w3c浏览器的对象
req = new XMLHttpRequest();
if (req.overrideMimeType) {
//如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作.
//为了解决这个问题, 如果服务器响应的header不是text/xml,可以调用其它方法修改该header.
req.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE678专用
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert('new window.ActiveXObject() failed!');
}
}
if (!req) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
//指定处理响应的JavaScript函数名.
req.onreadystatechange = alertContents;
//测试传递 用户名和密码
var user_name = document.getElementById('userName').value;
var user_pwd = document.getElementById('password').value;
//open(请求方式，准确的本域域名，是否异步);
//GET或POST方式
//----GET方式请求------
//req.open('GET', url+'?user_name='+user_name+'&user_pwd='+user_pwd, true);
//req.send(null);
//----POST方式请求------
//发送请求 如果open是POST方式可以发送字符串给服务器,也可以在open的第二个参数同时加上get传输
////req.open('POST', url+'?get1='+user_name+'&get2='+user_pwd, true);
req.open('POST', url, true);
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send('user_name='+user_name+'&user_pwd='+user_pwd);
}
/**
* ajax请求的回调处理函数
*/
function alertContents() {
if (req.readyState == 4) {
console.log(req.status);
if (req.status == 200) {
alert(req.response);
} else {
alert('There was a problem with the request.');
}
}
}
</script>
</body>
</html>

./test.php代码如下

<?php
header('content-type:text/html;charset=utf-8');
var_dump($_POST);//获取到post传递的数据
var_dump($_GET);

以上所述是小编给大家介绍的JavaScript中的ajax功能的概念和示例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS实现self的resend

    ECMA V5定义了一个期待已久的方法:Object.getPrototypeOf,它可以无视型别信息得到某对象的原型([[prototype]]),基于此,我们可以构造出一个resend:(请用Chrome 5.IE9预览第三版测试) 复制代码 代码如下: obj.resend = function() { var pof = Object.getPrototypeOf; var has = function() {......} // hasOwnProperty的封装 var make =

  • JavaScript随机生成颜色的方法

    废话不多说了直接给大家贴js代码了,具体代码如下所述: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn1">调用第一种</button> <button

  • 原生JavaScript制作计算器

    原生JavaScript制作计算器

    原生JavaScript制作计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--第一个数X--> X:<input type="text" id="inp1" value="" /&g

  • javascript对浅拷贝和深拷贝的详解

    javascript对浅拷贝和深拷贝的详解

    下面小编就为大家带来一篇浅谈JavaScript中面向对象的的深拷贝和浅拷贝.小编觉得挺不错的,现在就分享给大家,也给大家做个参考. 1.浅拷贝:复制一份引用,所有引用对象都指向一份数据,并且都可以修改这份数据. 2.深拷贝(复杂):复制变量值,对于非基本类型的变量,则递归至基本类型变量后,再复制. 这里画一个简单的图来加深理解: 一.数组的深浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个

  • JavaScript排序算法动画演示效果的实现方法

    JavaScript排序算法动画演示效果的实现方法

    之前在知乎看到有人在问 自己写了一个冒泡排序算法如何用HTML,CSS,JavaScript展现出来排序过程.   感觉这个问题还挺有意思 .前些时间就来写了一个.这里记录一下实现过程. 基本的思想是把排序每一步的时候每个数据的值用DOM结构表达出来. 问题一:如何将JavaScript排序的一步步进程展现出来? 我试过的几种思路: 1.让JavaScript暂停下来,慢下来. JavaScript排序是很快的,要我们肉眼能看到它的实现过程,我首先想到的是让排序慢下来. 排序的每一个循环都让它停

  • javascript self对象使用详解

    Javascript self对象指窗口本身,它返回的对象跟window对象是一模一样的,也正因为如此,window对象的常用方法和函数都可以用self代替window,本文章向大家介绍self对象的使用方法和实例, 我们知道,打开任何一个网页,浏览器会首先创建一个窗口,这个窗口就是一个window对象,也是js运行所依附的全局环境对象和全局作用域对象.self 指窗口本身,它返回的对象跟window对象是一模一样的.也正因为如此,window对象的常用方法和函数都可以用self代替window

  • javascript中的self和this用法小结

    一. 起因 那天用到prototype.js于是打开看看,才看几行就满头雾水,原因是对js的面向对象不是很熟悉,于是百度+google了一把,最后终于算小有收获,写此纪念一下^_^. prototype.js代码片段 代码如下:var Class = {     create: function() {         return function() {             this.initialize.apply(this , arguments);         }     }

  • 基于Javascript实现文件实时加载进度的方法

    基于Javascript实现文件实时加载进度的方法

    我们首先来看看要实现的效果图 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} div{width:200px;height: 30px;border:1px solid #ccc;ma

  • 基于JavaScript实现前端文件的断点续传

    基于JavaScript实现前端文件的断点续传

    还是先以图片为例,看看最后的样子 一.一些知识准备 断点续传,既然有断,那就应该有文件分割的过程,一段一段的传. 以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割,我们可以可以使用slice方法来分割文件. 所以断点续传的最基本实现也就是:前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接. 而我们需要对FileList对象进行修改再提交,在之前的文章中知晓了这种提交的一些注意点,因为F

  • JavaScript中的ajax功能的概念和示例详解

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML). 个人理解:ajax就是无刷新提交,然后得到返回内容. 对应的不使用ajax时的传统网页如果需要更新内容(或用php做处理时),必须重载整个网页页面. 示例: html代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

  • JavaScript中自带的 reduce()方法使用示例详解

    1.方法说明 , Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是: [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) 2. 使用示例 'use strict'; function string2int(s){ if(!s){ alert('the params empty'); return; } if

  • JavaScript中运算符规则和隐式类型转换示例详解

    前言 本文主要给大家介绍了关于JavaScript运算符规则和隐式类型转换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 隐式类型转换 在 JavaScript 中,当我们进行比较操作或者加减乘除四则运算操作时,常常会触发 JavaScript 的隐式类型转换机制:而这部分也往往是令人迷惑的地方.譬如浏览器中的 console.log 操作常常会将任何值都转化为字符串然后展示,而数学运算则会首先将值转化为数值类型(除了 Date 类型对象)然后进行操作. 我们首先来

  • JavaScript中的垃圾回收与内存泄漏示例详解

    JavaScript中的垃圾回收与内存泄漏示例详解

    前言 程序的运行需要内存.只要程序提出要求,操作系统或者运行时就必须供给内存.所谓的内存泄漏简单来说是不再用到的内存,没有及时释放.为了更好避免内存泄漏,我们先介绍Javascript垃圾回收机制. 在C与C++等语言中,开发人员可以直接控制内存的申请和回收.但是在Java.C#.JavaScript语言中,变量的内存空间的申请和释放都由程序自己处理,开发人员不需要关心.也就是说Javascript具有自动垃圾回收机制(Garbage Collecation). 一.垃圾回收的必要性 下面这段话

  • javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件---由外到内 事件冒泡:自下而上的去触发事件---由内到外 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获 true,事件捕获:false,事件冒泡 一般默认false,即事件冒泡 Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了 下面是我尝试的例子: <!DOCTY

  • JavaScript中数组去重常用的五种方法详解

    目录 1.对象属性(indexof) 2.new Set(数组) 3.new Map() 4.filter() + indexof 5.reduce() + includes 补充 原数组 const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; 1.对象属性(indexof) 利用对象属性key排除重复项 遍历数组,每次判断新数组中是否存在该属性,不存在就存储在新数组中 并把数组元素作为key,最后返

  • history保存列表页ajax请求的状态使用示例详解

    目录 问题 优化前代码 history history.pushState() window.onpopstate 问题2 问题 最近碰到两个问题: 从首页进入列表页之后,点击下一页的时候,使用ajax请求更新数据, 然后点击浏览器“后退”按钮就直接返回到首页,实际这里想要的效果是返回列表页上一页. 在列表页分页为2的页面进入详情页,然后点击“后退”按钮,返回的事列表页分页为1的页面.没法记住之前分页状态. 优化前代码 代码如下,在页数变化的时候,去异步请求数据,渲染页面. const curr

  • 在Android环境下WebView中拦截所有请求并替换URL示例详解

    需求背景 接到这样一个需求,需要在 WebView 的所有网络请求中,在请求的url中,加上一个xxx=1的标志位. 例如 http://www.baidu.com 加上标志位就变成了 http://www.baidu.com?xxx=1 寻找解决方案 从 Android API 11 (3.0) 开始,WebView 开始在 WebViewClient 内提供了这样一条 API ,如下: public WebResourceResponse shouldInterceptRequest(Web

  • SSM框架整合JSP中集成easyui前端ui项目开发示例详解

    SSM框架整合JSP中集成easyui前端ui项目开发示例详解

    目录 前言 EasyUI下载与配置 页面美化 运行结果 总结与问题 前言 前端的UI框架很多,如bootsrap.layui.easyui等,这些框架提供了大量控件供开发人员使用,我们无需花费太大的精力,使得我们的页面具有专业标准,使用起来也很简单.所有的前端框架使用方式基本上大同小异,以下使用easyui作为UI框架做一演示,个人认为easyui提供的控件比较好看. EasyUI下载与配置 使用EasyUI,必须下载其js包,下载官网地址:https://www.jeasyui.cn/ 下载j

  • .NET 中配置从xml转向json方法示例详解

    .NET 中配置从xml转向json方法示例详解

    目录 一.配置概述 二.配置初识 三.选项模式 四.选项依赖注入 五.其它配置 六.托管模式 一.配置概述 在.net framework平台中我们常见的也是最熟悉的就是.config文件作为配置,控制台桌面程序是App.config,Web就是web.config,里面的配置格式为xml格式. 在xml里面有系统生成的配置项,也有我们自己添加的一些配置,最常用的就是appSettings节点,用来配置数据库连接和参数. 使用的话就引用包System.Configuration.Configur

随机推荐