Ajax的简单笔记

前端之家收集整理的这篇文章主要介绍了Ajax的简单笔记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Ajax概念:Ajax 就是 Asynchronus JavaScript And XML的简写。Ajax不是一门单独的技术,而是几门技术的综合应用。

其核心也只不过是在JavaScript中调用一个叫XMLHttpRequest的JavaScript类,这个类可以使用HTTP协议和WEB服务器进行交互,程序不通过浏览器发送请求,在由这个JavaScript对象接受响应,并将反应结果用DOM编程方式添加到原来的网页上。XMLHttpRequest对象在网络上俗称XHR对象。

AJAX的原理简单来说就是通过XMLHttpRequest对象向服务器发送异步请求,从服务器获得数据,然后通过DOM编程来改变页面内容。其中最关键的一步就是从服务器取得数据。

XMLHttpRequest的基本属性

onreadyststechange 每次状态改变要触发的事件的事件处理程序

responseXML 从服务器端返回的DOM兼容的文档数据对象

responseText 从服务器返回的数据的字符串形式

staus 从服务器返回的数字代码,比如常见的404(未找到)和200(以就绪)

status Text 伴随着状态码的字符串信息

readyState 对象状态值

0:(未初始化)对象以建立,单尚未初始化(尚未调用open方法)

1:(初始化)对像以建立。未调用send方法

2:(发送数据)send方法调用,但是当前状态和http头未知

3:(数据传送中)已接受部分数据,因为响应及http头未知

4:(完成)数据接受完毕,此时可以通过responseText和responseXML获取完整的返回数据。

特点:浏览器中显示一个页面后,这个页面以后一直不改变,所有的操作请求都是由这个网页的JavaScript发出,所有的结果都由JavaScript代码接收并响应在这个页面上。

增强用户体验,可以在用于浏览网页的同时与服务器进行异步交互和实现网页内容的局部更新。学习ajax的难点并不在于XMLHttpRequest对象本身,而在JavaScript的DOM编程。

使用Ajax的步骤

1.获取XMLHttpRequest对象

function getXMLHttpRequest(){
var xRequest=null;
        if(window.XMLHttpRequest)
        {
            xRequest=new XMLHttpRequest();
        }
        else if(typeof ActiveXObject != "undefined")
             {
                xRequest=new ActiveXObject("Microsoft.XMLHTTP");            
             }
        return xRequest; 
}
function  TestAjax(){
 var xhr=getXMLHttpRequest();
 xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&(xhr.status==200||xhr.status==304)){
   //处理结果
   var ret=eval(xhr.responseText);
   //var s="";
   while(cities.options.length>0)cities.options[0]=null;//清空原来的option结点
   for(var i=0;i<ret.length;i++){
    //s+="<option>"+ret[i]+"</option>";
    cities.options[cities.options.length]=new Option(ret[i]);
   }
   //document.getElementById("cities").innerHTML=s;
  }
  }
 xhr.open("post","loadCities",true);
 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 xhr.send("name="+name); 
}

原文链接:https://www.f2er.com/ajax/165588.html

猜你在找的Ajax相关文章