js初级和简易ajax心得

写此文的目的，我总觉得，自己学了点什么新东西，是应该写出来总结下，省的又还给书本了，虽然这些知识浅薄……

观豪情兄的一篇博文：决定系统的学习下js，曾以为轻视了的技术。

书籍阅读进度：

1. javascript 高级程序设计第二版（初级）【ing】

2. javascript 高级DOM程序设计（初级）

3. javascript语言精髓与编程实践（进阶）

毕竟计算机是一门实践性很强的学科，所以动手敲代码才是学习的途径。

知识点：

1.js中with的用法，另一篇博文已经提及。

2.js中函数的特殊性，根本不存在重载的概念，后面定义的同名函数会覆盖先前定义的函数（不管形参是否相同），而函数的形参可写可不写，反正都是能从arguments数组中取得的，这点js做的很另类。

<script type="text/javascript">
    //js不介意函数的参数，可有，可无，可用arguments数组取出
    function sayHi(){
        document.write(arguments[0]+arguments[1]+arguments[2]+arguments[3]);
        document.write("</br>");
        document.write("hello");
        //因为arguments是数组
        document.write("</br>" + arguments.length);
    }
    
    sayHi("hello",12,true);
</script>

3.ajax的简单原理。

学ajax无非是再学XMLHttpRequest 对象的使用方法，达到的目的就是JavaScript 可在不重载页面的情况与 Web 服务器交换数据。

其中不同浏览器对ajax支持的情况不一样，所以也就有了下面这段经典的代码：

<html>
<body>

<script type="text/javascript">

function ajaxFunction()
 {
 var xmlHttp;
 
 try
    {
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {

  // Internet Explorer
   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {

      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的浏览器不支持AJAX！");
         return false;
         }
      }
    }
 }
</script>

<form name="myForm">
用户: <input type="text" name="username" />
时间: <input type="text" name="time" />
</form></body>
</html>

4.下面是重头戏，XMLHttpRequest的三个重要的属性。

1）onreadystatechange 属性：每当readyState属性改变的时候，此属性对应的函数就会被执行，形如：

xmlHttp.onreadystatechange=function()
  {
  // 我们需要在这里写一些代码
  }

2）readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

一般我们这样使用：

xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    // 从服务器的response获得数据
    }
  }

3）responseText 属性

最为重要的属性，我们通过本属性从服务器端取回来我们交互的数据（可能是数据库中查询，可能是xml中查询的……）。

xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    document.myForm.time.value=xmlHttp.responseText;
    }
  }

4.最终放一个相对完整的例子。

<html>
<body>

<script type="text/javascript">

function ajaxFunction()
 {
 var xmlHttp;
 
 try
    {
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {

  // Internet Explorer
   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {

      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的浏览器不支持AJAX！");
         return false;
         }
      }
    }
	
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
         document.myForm.time.value=xmlHttp.responseText;
        }
      }
    xmlHttp.open("GET","time.asp",true);
    xmlHttp.send(null);
	
 }
</script>

<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>

</body>
</html>

posted @ 2011-05-02 22:23 NeverLand2011 阅读(319) 评论(0) 收藏举报

刷新页面返回顶部

js初级和简易ajax心得

公告