原生态JS操作ajax(二)——操作html

ajax基础信息前面都已经介绍过了。这个就略过。

使用原生js操作ajax的话还是比较容易的,跟前面的一篇内容基本差不多。

使用步骤:

一、创建对象 XMLHTTPRequest/ActiveOBject

二、发送请求 open()、send()

三、服务器响应 responseText(onreadystatechange、readyState、status)

步骤大体就分为这三个。

创建对象

 var xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else{
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

如果是ie5、ie6的浏览器是不支持 XMLHttpRequest()这个对象的,需要用ActiveXObject()这个对象来实现。

上面的window.XMLHTTPRequest判断浏览器是否支持XMLHttpRequest()这个功能,如果支持就创建对象不支持则创建ActiveXObject对象。

发送请求

使用open()方法来创建请求,里面有两个参数,第一个参数是用什么方式来请求,一般常用的get post两种,第二个参数就是要请求的url地址。

用send()方法来发送参数,如果请求的地址不带参数则填null。

xmlHttp.open("GET","ceshi.php");
xmlHttp.send(null);

这儿访问的是本地的ceshi.php,这个不管哪种编程语言,只要是能开发web的编程语言都可以实现。

服务器响

使用responseText来接收服务器响应

xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4){
        if(xmlHttp.status == 200 || xmlHttp.status==304){
            alert(xmlHttp.responseText);                   
        }
    }
}

第一个判断 onreadystatechange 当请求被发送到服务器时,需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState是指存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

以下就是readyState存储的值。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪

所以在上面判断readyState是否等于4 如果等于4的话就代表响应已经完成。

status这个是一个状态值判断200或者304是请求处于正常状态。

常用status状态值有 200(正常) 403(找不到页面) 500(服务器异常)。

至此前台的程序已经完毕。

接下来需要在程序文件 ceshi.php文件里面创建内容,这儿只做个简单的演示内容

ceshi.php

<?php
	echo "<p>ceshi</p>"
?>

上面只是用aler打印出来。如果要放到网页页面上,就需要大家学习DOM的内容了。

更多相关文章
  • ajax相信大家都不陌生,不过现在大家基本都是用jQuery来实现ajax,因为jQuery已经封装好了,比较简单,大家学起来容易,而且大多公司基本都用.有人可能觉得既然jQuery那么简单,干嘛要用原生js来实现了,多麻烦的.不过个人觉得虽然原生js实现有点麻烦,但是学会了也并没有坏处.原生态js ...
  • js/json 数组的操作 http://blog.sina.com.cn/s/blog_4d0309640101iset.html 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建 ...
  • js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var LG=(function(lg){ var objURL=function(url){ this.o ...
  • JS与PHP数组操作的不同
    JS与PHP数组操作的不同 1.JS 中向数组中添加元素,必须指定下标 2.php中向数组中添加元素,可以不指定下标(追加) 3.JS 中数组元素的下标,是连续 4.PHP中数组元素的下标,可以不连续 5.JS中数组的长度是最大下标加1,数组名.length                 人吃饭 ...
  • 在nodeJS中操作文件系统(二)
    在nodeJS中操作文件系统(二)   1. 移动文件或目录     在fs模块中,可以使用rename方法移动文件或目录,使用方法如下:     fs.rename(oldPath,newPath,callback); 在rename方法中,有三个参数,oldPath参数用于指定被移动文件或目录的 ...
  • 上一次我们练习了基本的文件系统操作方法,包括创建.复制.移动(剪切).重命名.删除文件和目录的方法,非常常用.本次我们继续来探讨文件系统,本次来关注一下这些命令:Get-ChildItemAdd-ContentClear-ContentGet-ContentSet-ContentOut-FileSe ...
  • 原生js写ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应数据: 下面简单封装一个函数,之后稍作解释 ajax({ url: " ...
  • 浅谈JS之AJAX
    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HTTP和web服务器进行数据交换(用户不知道也感觉不出来,就跟桌面应用程序似的进行数据交互),它不会导 ...
一周排行
  • Ubuntu 12.04:不能创建用户和配额的问题: bug页:https://bugs.launchpad.net/openstack-cisco/+bug/1167483 # vim /usr/share/ope ...
  • 80后的互联网北漂:你的未来在哪
    小强创立的"三级火箭"学习方式1.参加培训班,即报名缴纳学费后,拉入专 ...
  • js面向对象的组成是 1.属性 2.方法 使用的时候是再构造函数里面加属性,在原型里面加方法. 如果直接在构造函数里面:传值.新建对象.增加属性/方法.返回对象的这种方法,会产生问题,主要是 1.没有new 2.函数 ...
  • 配置三层交换机通用的四个步骤就是:划分VLAN,并描述:给VLAN划网关:给VLAN指定端口:配置路由协议:学会这几个步骤之后就能解决所有的配置三层交换机的问题.<H3C>language-modechi ...
  • 首先,祝大家新年快乐!HAPPY 2010! 2009就这么要结束了,还有7,8个小时就要到了2010年了.没有写总结,是个遗憾.年年都有这个遗憾...这几天,跟无数人说过新年快乐,也有无数人问过我,"元旦 ...
  • CyclicBarrier是一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及一组固定大小的线程的程序中,这些线程必须不时地互相等待,此时Cyclic ...
  • 我的家乡:巨野话四级考试试题(全真题)
    巨野话四级考试试题(全真题)(满分120分,120分钟)2006年联合国教科文组织.国家教 ...
  •         自从Spring2.5版本以后就引入了很多典型化注解(stereotype annotation),例如:@[email protected]@Controller.@Repositor ...
  • std::map在过去的旧的实现中,map::erase()的返回值类型为void,在遍历过程中,如果要erase,要格外小心,因为iter会在某些情况下失效.    std::map<int, int> ...
  • 翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css. 你知道我们 ...