原生javascript Ajax

2022-01-08 04:25:30

代码

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

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 事件中的就绪状态时执行的函数：

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

同步方式：请不要编写 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时，表示响应已就绪：

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

注意：onreadystatechange事件被触发5次（0-4），对应着readyState的每个变化。

当页面中同时有几个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;
    }
  });
}

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

<?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代码

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();
}

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

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

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

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

原生javascript Ajax

码农公寓

相关文章