与后台交互方法一 —

一、Ajax：为无刷新读取服务器端数据，常用在用户注册、在线聊天室等。

使用Ajax读取数据时有以下几点需要注意：

1.字符集编码前后台要一致，否则前台显示的数据为乱码。

2.使用随机数或时间清除缓存、阻止缓存，防止服务器端文件内容变化时，浏览器端没有及时更新。

3. Ajax读取的所有数据都是字符串，所以请求JSON文件时用eval解析。

4.Ajax读取的数据与扩展名无关。

5..用DOM创建元素

二、HTTP请求两种不同的方法：

Get方法一般用于获取数据，如浏览帖子。Get是在url里传数据：安全性低，容量小等。

Post方法一般用于上传数据，如用户注册。

三、创建Ajax对象：

高版本Ajax对象：XMLHttpRequest();

低版本(IE6-8)Ajax对象：ActiveXObject(“Microsoft.XMLHTTP”);

四、连接服务器方法：

Open(方法，文件名，异步传输)

五、请求状态监控：

Onreadystatechange事件

readyState属性：请求状态

0：未初始化，刚创建出来

1：发送，已调用send()方法，正在发送请求

2: 载入完成，shend()方法完成，已收到全部响应内容

3：解析，正在解析响应内容

4：完成，响应内容解析完成，可以在客户端调用了。

返回值为：responseText;

六、具体实现方式如下：

<html>
	<head>
	<meta charset="utf-8">
	<meta name="author" content="" />
	<meta name="copyright" content="" />
	<title></title>
	<style>

	</style>
	<script src="ajax.js"></script>
	<script>
	window.οnlοad=function ()
	{
	var oBtn=document.getElementById('btn1');

	oBtn.οnclick=function ()
	{
	ajax('arr.txt', function (str){
	var arr=eval(str);

	alert(arr[0]);


	//alert(str+12);
	//alert(arr.length);

	//alert(arr[0]);
	});
	};
	};
	</script>
	</head>

	<body>
	<input type="button" value="aaa" id="btn1" />
	</body>
	</html>

Ajax.js

function ajax(url, fnSucc, fnFaild)

{

//1.创建Ajax对象

if(window.XMLHttpRequest)

{

var oAjax=new XMLHttpRequest();

}

else

{

var oAjax=new ActiveXObject("Microsoft.XMLHTTP");

}

//2.连接服务器（打开和服务器的连接）

oAjax.open('GET', url, true);

//3.发送

oAjax.send();

//4.接收

oAjax.onreadystatechange=function ()

{

if(oAjax.readyState==4)

{

if(oAjax.status==200)

{

//alert('成功了：'+oAjax.responseText);

fnSucc(oAjax.responseText);

}

else

{

//alert('失败了');

if(fnFaild)

{

fnFaild();

}

};

}

Arr.txt

[2013,9,9]

转载于:https://www.cnblogs.com/ygl-web/p/3309188.html

与后台交互方法一 ——Ajax相关推荐

ajax调用后台java方法,jquery ajax再次封装，前台调用后台java方法直接返回数据
一,前台js部分代码 /** * bean参数格式:类全限定名.方法名 opt参数格式:键值对 handleResponse:会function类型参数包含一个参数data,为后台返回json数据 ...
不用AJAX实现前台JS调用后台C#方法(小技巧)
纯属小技巧,高手见笑了. 一提到如何在前台JS调用后台C#方法,AJAX成为了必然的想法. 只是实现的细节采用AJAX 1.0或者AjaxPro的区别. 其实如果不用AJAX,我们也能够很方便地利用J ...
ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
jQuery ajax get与post后台交互中的奥秘
这两天在做关注功能模块(类似于Instagram).多处页面都需要通过一个"关注"按钮进行关注或者取消该好友的操作.一个页面对应的放一个按钮,进行操作.效率低维护性差.因此想通过j ...
jquery 的$.ajax() 与php后台交互
看了菜鸟ajax的系列教程:对ajax有了初步的了解,但是我主要是想利用ajax与php做前后台交互的,所以便想着一步步实现这个想法,因为对ajax不是特别熟悉,所以写的都是菜鸟般的代码,见谅.. 看 ...
jquery的$.ajax()利用FormData数据类型与php后台交互
可能孤陋寡闻,现在才知道MDN的存在:https://developer.mozilla.org/zh-CN/ 的MDN全名容易理解他是什么意思:MDN Web Docs 好了,自行学习,上一篇讲了j ...
layui 读取本地excel内容_layui之数据表格--与后台交互获取数据的方法
jsp或html js //用户列表 var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action ...
ajax传递数组到后台时为空,ajax传递数组，后台接收为null解决方法
traditional:true,加上这个就好,默认为false,即允许深度序列化参数,但是servlet api不支持,所有设为true阻止就好了. $.ajax({ type:'post', ur ...
ajax 调用后台的方法
//前台的代码 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMetho ...

与后台交互方法一 ——Ajax

与后台交互方法一 ——Ajax相关推荐

最新文章

热门文章