分类目录归档:Ajax

通过jsonp实现跨越应用示例

转载自:http://www.smallgang.cn/index.php/JavaScript/jsonp.html   什么是JSONP协议? JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。 很明显,JSONP是一种脚本注入(Script Injection)行为,需要特别注意其安全性。 站点www.87end.cnd的php代码(jsonp.php) //ajax接收的参数$action = $_GET['act'];$name = $_GET['name']; call_user_func($action, $name); function sayHello($name) {    $callback = trim($_GET['jsoncallback']);    $arr = array(‘msg’=>’hello ‘ . $name);    echo $callback.”(“.json_encode($arr).”);”;} 站点www.smallgang.cn的 JS脚本(jsonp.html), 用jquery的ajax,有两种实现方式 方法一: jQuery.getJSON(url,[data],[callback])$.getJSON(“http://www.87end.cn/jsonp.php?act=sayHello&name=xiaogang&jsoncallback=?”,     function(data){         alert(data.msg);     }  ); 方法二:jQuery.ajax(options)$.ajax({ … 继续阅读

发表在 Ajax | 标签为 , , | 留下评论

jquery的serialize方法

function test(){ //序列表单内容为字符串。 var obj=$("#form1").serialize(); alert(obj);//user=chenlong&pass=123 //序列化表单元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。 var obj2=$("#form1").serializeArray(); alert(obj2); //[object Object],[object Object] for(var i=0;i<obj2.length;i++){ //alert(obj2[i].user+" "+obj2[i].pass);//undifined undifined   undifined undifined alert(obj2[i].name+" "+obj2[i].value); //user chenlong       pass 123 } //obj2结构应该是: [{name: ‘user’, value: ‘chenlong’}, {name: ‘pass’, … 继续阅读

发表在 Ajax | 标签为 | 留下评论

【转】jQuery.getScript跨域加载远程PHP文件

jQuery.getScript跨域加载远程PHP文件,实现远程信息共享 最近有一个跨域加载远程PHP文件需求,需要将跨域远程的用户信息加载到本地使用,研究和参考相关资料,非常简单,其它后缀类似文件(asp,js)一样。 解决方案如下: 需要两个文件:提供信息的PHP文件(访问的远程文件),加载远程文件的JS文件(获取或处理远程信息) —————————————————————— infoBox.php(提供远程信息,与JS文件不在同一域) <?php $InfoBox = array(‘url’=>’biuuu.com’,’title’=>’必优博客’);echo ‘var data=’ . json_encode($InfoBox) . ‘;’; ?> 将数据组装数组,通过PHP内置函数json_encode将数组转化成json数组,方便数组内容被远程调用。 —————————————————————— box.js(调用远程PHP文件JS类) var box = {};var remoteUrl = ‘http://www.biuuu.com/infoBox.php’;//远程调用URL box.showBoxInfo = function() {jQuery.getScript(remoteUrl, function(){var boxInfoWrapper = jQuery(‘#boxInfoWrapper‘);var html = box.getBoxHtml(data.url,data.title);boxInfoWrapper.html(html);});} box.getBoxHtml = … 继续阅读

发表在 Ajax | 标签为 , | 留下评论

JQuery的ajax实例

感觉自己好像捣鼓了一阵子jQuery了,不断地拿着火狐浏览器的错误控制台围绕着Google地图调啊调的,页面整Ajax登录验证,更新数据乱七八糟的好像捣了几个月了。。。之前想把prototype看一下的,毕竟也是比较好的js框架,一直没看,也不知道都忙到哪里去了,哎,发现其实时间挺好混的。。。想挣大钱还是能力不够的。。。以前我一直反感二次开发,但是现在公司很多都是弄这个,不得不研究discuz,uchome这些东西,还有phpcms,现在也只是大概清楚了数据走向,基本上可以改模板。现在发现康盛的东西还是不错的,phpcms也不错。要是一个人能把这样的整体框架设计(包括数据库的设计)出来,我认为他是个很牛的人!它们给我的印象:会拼凑变量充分利用资源!一个方法关联到几个文件!雷人! 没事发个文件吧,发现现在不做笔记,用的时候找还真是个麻烦。昨天想把依赖uchome做的那个postcrossing项目用smarty分离出来,不再用uchome的template那套机制的,不知道怎么调用foreach 的item的属性了,搞了很长时间,原来用 xx 点 数组下标,郁闷死我了! 今天没事整理桌面垃圾文件,不知道什么时候下的,看看还可以,顺便贴上来!也不知道是哪位哥哥之前写的。 JQuery的ajax实例: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <script language="javascript" src="../lib/jquery.js"></script> <script language="javascript"> $(document).ready(function () {    $(‘#send_ajax’).click(function (){      var params=$(‘input’).serialize(); //序列化表单的值      $.ajax({        url:’ajax_json.php’, //后台处理程序        type:’post’,         //数据发送方式        dataType:’json’,     //接受数据格式 … 继续阅读

发表在 Ajax | 标签为 , , , | 4 条评论

button和submit

好长时间没写登陆了,不会写了。。。首先不希望是页面跳动,所以用了jQuery。然后想到用Ajax验证就不需要form表单提交了,所以直接干掉了form的action, method ,后来做完了。用的是button的onclick事件,但是老大说要按了enter就登录!晕。。。然后又想着怎么响应enter键的事件 什么if(window.event.keyCode==13) {}反正瞎搞了几次发现不好,又还不知道什么时候触发调用这段js代码。。。按我想是不是应该跟body onload 一个级别的。。。算了。。如果把button或者input的type由button改成submit,按enter键会跳走的!但是不成功的信息呈现出来马上就跳回当前页面了,这个过程应该是:显示错误 ==》跳转到home.php ==》判断后再跳回登录页面!因为我在验证文件login.php里设定的验证成功返回1且设定session[uid]=xx什么的,不成功就返回2.然后在回调函数里判断的。而home.php里判断session[uid]不存在就跳回登录页面了。咋办呢?后来又想到了用form 的onsubmit 事件,但是回调方法里怎么return 都接收不到,听说因为是异步操作。。我也不知道,之前弄Google地图时候在回调想改变全局变量也出现过问题。发现onsubmit只要不是FALSE 就要跳走。。。干脆搞了个损招,方法里不管是if 还是else的 都让它return FALSE。只有在回调里成功的情况用js提交表单跳转。这样没用到onsubmit=true 的情况了。。。也不需要用    document.login_form.submit();来提交了!又得把表单数据发一次,累,直接跳走算了!用window.location.href="home.php";  不知道一个好的登录应该怎样实现!费劲啊。。。    function check_login(url,tip){ var username=$("#username").val(); var password=$("#password").val(); if(username==”||password==”){ $(‘#’ + tip).html(‘<font color="red">用户名和密码都不能为空!</font>’); return false; }else{ $.post(url, {username: username, password: password},function(data){ //alert(data); if(data==1){ … 继续阅读

发表在 Ajax | 标签为 , , | 留下评论

Ajax缓存解决办法

转载自:http://www.cnblogs.com/quange/archive/2009/07/24/1529958.html 项目有时要用一些Ajax的效果,因为比较简单,也就没有去用什么Ajax.net之类的东西,手写代码也就实现了。、 第二天,有人向我报告错误;说是只有第一次读取的值正常,后面的值都不正常;我调试了一下 ,确实有这样的问题,查出是因为AJAX缓存的问题:解决办法有如下几种:       1、在服务端加 header("Cache-Control: no-cache, must-revalidate");(如php中)   2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0");   3、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache");   4、在 Ajax 的 URL 参数后加上 "?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了   5、第五种方法和第四种类似,在 URL 参数后加上 "?timestamp=" + new Date().getTime();   6、用POST替代GET:不推荐 1、加个随机数       xmlHttp.open("GET", "ajax.asp?now=" + new Date().getTime(), true); … 继续阅读

发表在 Ajax | 标签为 , | 留下评论

级联下拉

Ajax.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>ajax demo</title> <meta http-equiv = "content-type" content = "text/html; charset=utf-8" /> <script type="text/javascript"> var xmlhttp; var province; function createXMLHttpRequest() { //xmlhttp=null; if (window.XMLHttpRequest) {// code for … 继续阅读

发表在 Ajax | 标签为 , , | 留下评论

ajax简单验证

register.jsp <%@ page language="java" contentType="text/html; charset=utf-8"     pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script type="text/javascript" src="js/loginchk.js"></script> </head> <body> 之前一直认为是form提交了做的判断,但是觉得按钮好像没有提交功能。后来仔细研究了下。是通过 xmlHttp.open("GET", "CheckUser?username=" + tempUsername);发送请求的。我把form注释了又试了试,ok。当然真正做注册的时候当然要form啦! <!– <form name="form1" method="post"></form> –> … 继续阅读

发表在 Ajax | 标签为 , | 留下评论