原生态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服务器进行数据交换(用户不知道也感觉不出来,就跟桌面应用程序似的进行数据交互),它不会导 ...
一周排行