Javascript实现AJAX的核心对象是XMLHttpRequest,

实现步骤(只需四步):

第一步,获取XMLHttpRequest对象,直接new一个XMLHttpRequest对象,var xmlHttp = new XMLHttpRequest()(适用于IE7+、firefox、Chrome、Safari和Opera),如果还有其他版本的浏览器,则会创建各自对应的对象。

第二步,打开与服务器的连接

xmlHttp.open(method,url,async);

method:请求方式,可以是GET或POST

url:所要访问的服务器中资源的路径如servlet/AServlet

async:是否为异步传输,true表示为异步传输,一般都是true

第三步,发送请求 

xmlHttp-.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头,通知服务器发送的数据是请求参数

new XMLHttpRequest().send("xxxxx");//注意,如果不给参数,可能会造成部分浏览器无法发送请求

参数:如果是GET请求,可以是null,因为GET提交参数会拼接在url后面

如果是POST请求,传入的就是请求参数

第四步,注册监听

在XMLHttpRequest对象的一个事件上注册监听器:

onreadystatechange

一共有五个状态:(xmlHttp.readyState)

0状态:表示刚创建XMLHttpRequest对象,还未调用open()方法

1状态:表示刚调用open()方法,但是还没有调用send()方法发送请求

2状态:调用完了send()方法了,请求已经开始

3状态:服务器已经开始响应,但是不代表响应结束

                4状态: 服务器响应结束!(通常我们只关心这个状态)

//获取xmlHttp对象的状态:

var state = xmlHttp.readyState;//可能得到0,1,2,3,4 

//获取服务器响应的状态码

var status = xmlHttp.status;

//获取服务器响应的内容

var data = xmlHttp.responseText;//得到服务器响应的文本格式的数据 

//相当于每次状态改变时,都会调用这个function

xmlHttp.onreadystatechange = function(){

    //当服务器已经处理完请求之后

    if(xmlHttp.readyState == 4){

        //status是应答状态码,200说明服务器响应完成,而且状态OK

        if(xmlHttp.status == 200){

            //获取响应数据并执行局部刷新的逻辑

            var result = xmlHttp.responseText;

            result = xmlHttp.responseXML;

        }

    }

}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 创建XMLHttpRequest 对象 所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及...
    Miracle_6e4f阅读 492评论 0 0
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,625评论 0 7
  • 要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就...
    亲爱的翔子阅读 568评论 0 0
  • 一、Ajax是什么 Ajax:全称是“Asynchronous Javascript And Xml”,翻译成...
    前端攻城狮子王阅读 652评论 0 4
  • 四川腊肉,水煮片刻后捞出。切后皮肉如凝脂,流油。 豆瓣酱,五香粉,糖。调酱料。 干辣椒,豆豉,姜末。炒配料。 成色...
    怀想君阅读 426评论 1 3

友情链接更多精彩内容