资讯专栏INFORMATION COLUMN

Ajax的原理和实现步骤

Harpsichord1207 / 2134人阅读

摘要:如果我们假设文件和文件位于相同的目录,那么代码是这样的其他方法如下编程步骤创建对象设置请求方式调用回调函数发送请求处理返回的结果创建对象一般来说手写的时候,首先需要判断该浏览器是否支持对象,如果支持则创建该对象,如果不支持则创建对象。

Ajax的简介 什么是Ajax

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页

Ajax所包含的技术

AJAX 的核心是 XMLHttpRequest 对象。

1.使用CSS和XHTML来表示。

2.使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

Ajax的工作原理

在用户和服务器之间添加了一个中间层(AJAX引擎),使用户操作与服务器响应异步话,并不是所有的用户请求都提交给服务器。
数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求

来看看两个方式的区别

XMLHttpRequ对象常用的三个属性

onreadystatechange属性
存有服务器响应的参数

readyState属性
存有服务器响应状态的信息

readyState 属性可能的值:

responseText 属性

可以取得有服务器返回的数据

其他的属性如下

xmlhttprequst的方法

open()方法

xmlHttp.open("GET","test.php",true);
第一个参数定义发送请求所使用的方法
第二个参数规定服务器脚本的URL
第三个参数规定了请求是否需要异步的处理

send()方法

send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录,那么代码是这样的:

xmlHttp.send(null);

其他方法如下

AJAX编程步骤
1.创建XMLHttpRequest对象
2.设置请求方式
3.调用回调函数
4.发送请求
5.处理返回的结果
创建XMLHttpRequest对象
    var xmlhttp=new XMLHttpRequest();
一般来说手写AJAX的时候,首先需要判断该浏览器是否支持XMLHttpRequest对象,如果支持则创建该对象,如果不支持则创建ActiveX对象。
    //第一步:创建XMLHttpRequest对象
    var xmlHttp;
    if (window.XMLHttpRequest) { //非IE
    xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) { //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
    }
设置请求方式
一般是有两种请求方式,一个是GET一个是POST,需要设置具体使用哪个请求方式
xmlhttp.open("method",URL,async);

参数如下

调用回调函数

当前为异步请求的时候,需要写一个回调函数,XMLHttpRequest对象有一个属性,这个属性要返回一个匿名的方法,所谓的回调函数,就是请求在后台处理完,再返回到前台所实现的功能。

xmlhttp.onreadystatechange = function (ev2) {
                    /*
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成,且响应已就绪
                    */
                    if(xmlhttp.readyState === 4){
                        // 判断是否请求成功
                        if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                           xmlhttp.status === 304){
                            // 5.处理返回的结果
                            console.log("接收到服务器返回的数据");
                        }else{
                            console.log("没有接收到服务器返回的数据");
                        }

                    }
                }
发送请求
xmlhttp.send

##处理返回的结果

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110316.html

相关文章

  • Ajax原理编程步骤

    摘要:如果我们假设文件和文件位于相同的目录,那么代码是这样的其他方法如下编程步骤创建对象设置请求方式调用回调函数发送请求处理返回的结果创建对象一般来说手写的时候,首先需要判断该浏览器是否支持对象,如果支持则创建该对象,如果不支持则创建对象。 Ajax的简介 什么是Ajax AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)...

    phpmatt 评论0 收藏0
  • 20K前端大佬面试(关于如何回答ajax跨域问题)

    摘要:在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下。 在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下。关于跨域,有N种类型,现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器同源策略中的一部分,其它的这里不做介绍),内容...

    Yangyang 评论0 收藏0
  • 20K前端大佬面试(关于如何回答ajax跨域问题)

    摘要:在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下。 在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下。关于跨域,有N种类型,现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器同源策略中的一部分,其它的这里不做介绍),内容...

    stackfing 评论0 收藏0
  • 前端面试题

    摘要:前端面试题总结,持续更新和区别浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用等跟服务端进行数据交互。 前端面试题总结,持续更新 cookies sessionStorage和localstorage区别 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。相同点:都是存储在客户端不同点:showI...

    raledong 评论0 收藏0
  • 前端面试题

    摘要:前端面试题总结,持续更新和区别浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用等跟服务端进行数据交互。 前端面试题总结,持续更新 cookies sessionStorage和localstorage区别 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。相同点:都是存储在客户端不同点:showI...

    seal_de 评论0 收藏0

发表评论

0条评论

Harpsichord1207

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<