原生javascript Ajax

代码

1. IE5 ,IE6 使用ActiveXObject对象,   其余现代浏览器都支持XMLHttpRequest对象;

原生javascript Ajax
function ajaxObject(){
  var xmlhttp;
 if(window.XMLHttpRequest){

       xmlhttp = new XMLHttpRequest();

  }else{

      xmlhttp  = new ActiveXObject(‘Microsoft.XMLHTTP);

  }

}
View Code

2.HTTP请求 ,使用javascript内置的open(),send()函数;open()有三个参数,第一个为请求的方式“GET/POST”,第二个参数为接收请求的操作"URL",第三个为处理请求的方式"async:true(异步)或 false(同步)",send()方法是向服务器发送请求,GET方式无需传入任何参数,POST方式时,将需要上传的数据以字符串形式,通过send()函数发送出去。

下面是一个简单的GET方式的异步Ajax请求。

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

下面是一个简单的POST方式的异步Ajax请求

xmlhttp.open(‘POST‘,‘index.php‘,true);
xmlhttp.send();

如果要想在ajax中像表单提交POST一样,传递数据,则要使用setRequestHeader()函数设置HTTP请求头,然后将要POST的数据传到send()函数中。

xmlhttp.open("POST","login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=Bill&password=13213212");

如何选择POST,还是GET,与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

     1.无法使用缓存文件(更新服务器上的文件或数据库)

     2.向服务器发送大量数据(POST 没有数据量限制)

     3.发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

javascript中的函数open()函数要使用ajax,则第三个参数必须设置为true,Ajax就是异步javascript和XML的意思。
URL是指存放在服务器上的用户接受,处理客户端请求的文件,可以是.txt .xml或者是.php .aspx .jsp等脚本文件。

同步与异步
同步是指程序代按照一定的逻辑顺序执行,只有在执行完了上一个逻辑,才能开始下一个逻辑。而异步是指程序代码可不按先后顺序执行。
同步与异步无优劣,需要看具体的应用环境而定。

异步方式:请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:

原生javascript Ajax
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
原生javascript Ajax

同步方式:请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 

扩展知识:

   setRequestHeader(header,value)函数

  • header: 规定头的名称
  • value: 规定头的值

  HTTP请求(百度百科):http://baike.baidu.com/view/641736.htm?fr=aladdin

3. HTTP响应

    如果来自服务器的响应并非 XML,请使用 responseText 属性:xmlhttp.responseText;如果来自服务器的响应是XML,而且需要当做XML对象解析,请使用responseXML属性:xmlhttp.responseXML;

4. onreadystatechange事件
    当请求被发送到服务器时,需要执行一些基于响应的任务。每当readyState改变时,就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。
    1. onreadystatechange函数,每当readyState属性改变时,就会调用该函数
    2. readyState属性,存有XMLHttpRequest的状态。从0-4发生变化。0:请求未初始化 1:服务器连接已建立 2:请求已接受  3:请求处理中  4:请求已完成,且响应就绪
 
    3. status属性:202:‘OK’ 404:未找到页面

   在onreadystatechange事件中,我们规定当服务器响应已做好被处理的准备时执行的任务,当readyState等于4且状态为200时,表示响应已就绪:

原生javascript Ajax
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
原生javascript Ajax

 注意:onreadystatechange事件被触发5次(0-4),对应着readyState的每个变化。

 当页面中同时有几个ajax时,应该使用回调函数调用函数,每次请求可能不尽相同。

 

原生javascript Ajax
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
原生javascript Ajax

使用Ajax技术能使Google suggestion功能很容易实现,结合javascript的onkeyup键盘事件,在用户输入的时候获取用户输入,将获取到的值通过Ajax发送到服务器,通过PHP ASP ASP.NET  JSP等脚本语言接收数据,与预设好的文本进行匹配,(在实际项目中需要从数据库中进行查询),将匹配结果进行响应,收到响应后有则将其显示给用户,没有则提示没有匹配成功的结果。下面以PHP脚本为例,模拟Google suggestion功能:

原生javascript Ajax
<?php
// 用名字来填充数组
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//获得来自 URL 的 q 参数
$q=$_GET["q"];

//如果 q 大于 0,则查找数组中的所有提示
if (strlen($q) > 0)
  {
  $hint="";
  for($i=0; $i<count($a); $i++)
    {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
      {
      if ($hint=="")
        {
        $hint=$a[$i];
        }
      else
        {
        $hint=$hint." , ".$a[$i];
        }
      }
    }
  }

// 如果未找到提示,则把输出设置为 "no suggestion"
// 否则设置为正确的值
if ($hint == "")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//输出响应
echo $response;
?>
原生javascript Ajax

javascript代码

原生javascript Ajax
function showHint(str)
{
var xmlhttp;
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
原生javascript Ajax

 源代码解释:
                如果输入框为空(str.length==0),则该函数清空txtHint占位符的内容,并退出函数。如果输入框不为空,showHint()函数执行以下任务:

  • 创建XMLHttpRequest对象
  • 当服务器响应就绪时执行函数
  • 把请求发送到服务器上的文件
  • ajax里面我们需要在URL中传入一个参数


    这个东西是从w3school中弄来的,原因是因为在实际开发中依赖惯了其他javascript库,对原生的javascript越来越生疏了,所以打算暂时不用框架了。
    多使用原生的,开发效率会低一些,但是结果会好一些。

原生javascript Ajax,布布扣,bubuko.com

原生javascript Ajax

上一篇:Java NIO、NIO.2学习笔记


下一篇:Iterator迭代器到底是什么?(上)