Erick » AJAX http://blog.xiongchuan.org Even a great life is only a life until you make it. Thu, 10 Mar 2011 14:44:44 +0000 en hourly 1 http://wordpress.org/?v=3.1 jQuery,callback|回调函数的问题 http://blog.xiongchuan.org/jquery-callback-function-something.html http://blog.xiongchuan.org/jquery-callback-function-something.html#comments Wed, 07 Oct 2009 06:44:29 +0000 Erick http://www.pigblog.net/?p=307 用jquery一直都是用的异步传输，习惯了，今天在做表单提交验证一个字段的惟一性的时候，同样是用了异步，问题就出现了。

	var checkwap=function(){
		var total;
		$.ajax({
			url:'bsmajax.php?type=checkwap',
			type:'GET',
			async:false,//原来是true,
			cache:false,
			data :{wapnum:$('input[id=wapnum]').val()},
			dataType :'json',
			success :function(json){
				total=json.total;
			}
		});
		return total;
	};
alert(checkwap());//开始的时候怎么也得不到值，以为是jquery关于变量作用域的访问问题

多加了几个alert();后才觉悟，因为是异步的，alert(checkwap());先执行了，等ajax成功返回数据后total才有值。
因为在表单提交的验证是要实时的，所以就 async:false 了，变成同步的。

当我以为是变量作用域问题时，在GOOGLE里搜索时，也有人犯这样的迷糊，现在记下来。

Related Posts

]]> http://blog.xiongchuan.org/jquery-callback-function-something.html/feed 0 AJAX五步走,POST方法学习手记 http://blog.xiongchuan.org/to-study-ajax-follow-me.html http://blog.xiongchuan.org/to-study-ajax-follow-me.html#comments Mon, 15 Jun 2009 08:30:50 +0000 Erick http://www.wp.com/wordpress/?p=81 本文原创，转载请注明出处，谢谢合作！
AJAX 关于这个技术的书和文章，我不知道看了多少，一直没有用过。
PigBlog主要功能里就只有发表评论了，想想就用AJAX的吧，开始操刀AJAX,下面是我用这个技术的时候的学习心得。

从整体上来说，就是在JS里程序然后，通过DOM操作获得数据，发送给后台的PHP文件，PHP文件处理，返回结果，JS再接收，再通过DOM操作显示数据。
思路就是这样，其中难点是JS文件的编写。这整个过程中，我用到的一些东西，XMLHttpRequest,XML,DOM.

第一步：建立XMLHttpRequest，怎么建立就不说了，网上多的方法，我只把我的代码发出来

JAVASCRIPT
  1. //创建XMLHTTP
  2. function CreateXMLHttp(){
  3. var request=false;
  4. try{
  5. if(window.XMLHttpRequest){
  6. request=new XMLHttpRequest();
  7. /*
  8. * 如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。
  9. * 为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。
  10. * From:http://leexuan.blogbus.com/logs/1935602.html
  11. * */
  12. if(request.overrideMimeType){
  13. request.overrideMimeType(‘text/xml’);
  14. }
  15. }
  16. else if(window.ActiveXObject){
  17. var i=0;
  18. var xmlarray=[
  19. 'Microsoft.XMLHTTP',
  20. 'MSXML.XMLHTTP',
  21. 'Msxml2.XMLHTTP.6.0',
  22. 'Msxml2.XMLHTTP.5.0',
  23. 'Msxml2.XMLHTTP.4.0',
  24. 'Msxml2.XMLHTTP.3.0',
  25. 'Msxml2.XMLHTTP'
  26. ];
  27. var len=xmlarray.length;
  28. for(i;i<len;++i){
  29. try{
  30. request=new ActiveXObject(xmlarray[i]);
  31. // request.SetRequestHeader(‘Content-Type’,'text/xml’);
  32. request.SetRequestHeader(‘Content-Type’,‘UTF-8′);
  33. break;
  34. }
  35. catch(e){
  36. request=false;
  37. }
  38. }
  39. }
  40. else{
  41. alert(‘你的浏览器不支持AJAX’);
  42. }
  43. }
  44. catch(e){
  45. request=false;
  46. }
  47. return request;
  48. }

其中有些东西是参考别人的文章。
第二步：做一个评论的HTML页，这个就不在这里弄出来。
第三步：再写JS函数，把评论数据拿出来，发到服务器上的PHP的文件。
我用的POST方法，当时做的时候，总是有问题，可是在网上百度或是GOOGLE，大部分都是GET方法，而且转载的有多少就更不想说了。

JAVASCIPT
  1. ajax.open(‘POST’,url,true);
  2. ajax.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’);
  3. ajax.send(querystr);

用POST方法，发送数据时，在send之前要加入setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’), 其中大小写一定要注意 ，open方法的url自己指定要发送的PHP文件，send里的querystr，就像平时的GET方法传值一样拼接一下，中间的加的这一句就是让querystr以表单形式发送出去，这里就涉及到了编码问题。不加这一句，PHP文件通过$_POST是接收不到值的。
第四步：写PHP文件，接收并处理$_POST数据。这里也没什么难的，如果你写过PHP程序并用过$_POST方法传值，这一点问题也没有。只是数据输 出的方式要注意。最开始接触AJAX的时候，只是看书，而且书上大多写的是如何创建XMLHttpRequest对象，很少讲到后台ASP/PHP怎么样 处理并返回数据。
对于和我一样有这种意识的PHP新手，我会简单说明下，你一下就明白了。AJAX接收的PHP返回的数据，其实很简单比如

PHP
  1. echo ‘Hi,This is the result!’;
    这个就是PHP返回的数据。

心想怎么echo ，的确，JS端这时候用responseText就可以接收到这样的输出，一般我们见的多的就是echo输出是输出到浏览器，实际上就AJAX接收的数据就是这样的。如果你不懂，就不要问，因为这样做是可行的。
现在回归正题，我返回的是XML的数据，对这种格式用的不多，所以在我的程序里，也是很简单的应用，一般有两种方法，PHP调用XMLDocument， 还有就是直接用echo输出构建好的XML格式的数据。我用的是后一种方法。其中，返回XML数据时，要在你的PHP文件头部加入

PHP
  1. header(‘content-type:text/xml;charset:utf-8′);
  2. header (“Cache-Control: no-cache,must-revalidate”);

如果不加入第一行，IE就接收不到，FF正常，我的测试。第二行，是强制禁止缓存，确保JS接收到的最新数据，理论，没有测试。

第五步：接收PHP返回的数据，并显示操作结果。因为返回的是XML的数据，var xmldoc=ajax.responseXML.documentElement;这样得到的就是一个XML文档对象，你可以像操作DOM一样操作他， 得到想要的数据，你问怎么操作？你会用DOM吗？不会就先把DOM学会，因为这是基础。这时候有了数据，那我就要发表评论了，按照我的评论的格式，依次创 建 文本节点，元素节点，结元素节点添加属性。。。这些操作，不想写太多了，新手要是能做到这儿，证明下面的已经自己会做了。
在为元素节点添加属性时，IE和FF的不同做法

JAVASCRIPT
  1. div1node.setAttribute(“class”,“lesscontent”);//FF
  2. div1node.setAttribute(“className”,“lesscontent”);//IE

我想强调的是，在AJAX的过程中，以前只知道CSS在不同的浏览器间有不兼容，现在发现JS,DOM的操作的不兼容也很严重。所以大家、特别是和我一样是新手的PHPer,就更要注意兼容性问题了。还有写JS的时候，千万要注意大小写的问题。

Related Posts

]]> http://blog.xiongchuan.org/to-study-ajax-follow-me.html/feed 0