实现Ajax异步交互

实现Ajax的执行步骤

1.创建Ajax的核心对象XMLHttpRequest对象

function createXMLHttpRequest(){//创建Ajax的核心对象XMLHttpRequest对象 是固定的 不管是什么只要是创建XMLHttpRequest对象的就是用这个var httpRequest;if(window.XMLHttpRequest){//XMLHttpRequest存在  就是适用于Chrome，Firefox.... 大部分的浏览器httpRequest = new XMLHttpRequest();}else if(window.ActiveXObject){//ActiveXObject存在  就是用于IE浏览器 就他一个try{httpRequest = new ActiveXObject('Msxml2.XMLHTTP');//IE 7以上}catch(e){//报错了就不是IE7以上try{httpRequest = new ActiveXObject('Microsoft.XMLHTTP');//IE 6以下}catch(e){}}}return httpRequest;
}

2.通过XMLHttpRequest对象的open()方法与服务器建立连接

3.构建请求所有数据内容，并通过XMLHttpRequest对象的send()方法发给服务器

4.通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器的通信状态

5.接收并处理服务器向客户端响应的数据结果

6.将处理结果更新到HTML页面中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="btn">按钮</button>
</body>
<script src="../9.2/创建XMLHTTPRequest对象.js"></script>
<!-- 引入写好的适配浏览器的创建XMLHTTPRequest对象 -->
<script>var btn = document.getElementById('btn');btn.addEventListener('click',function(){//实现ajax的异步交互//创建XMLHTTPRequest对象var xhr = createXMLHttpRequest();//通过XMLHTTPRequest对象的open方法与服务器建立连接  //open方法有四种参数格式//第一种两个参数  method 和 url                                                method是请求方法    url是发送请求的路径和地址//第二种三个参数  method 和 url 和 async(可选)                                 async是 是否异步  布尔参数 true为异步  false为同步  基本不用//第二种四个参数  method 和 url 和 async(可选) 和 user(可选)                    user用户名认证//第二种五个参数  method 和 url 和 async(可选) 和 user(可选) 和 password(可选)   password密码认证xhr.open('get','http://127.0.0.1:1877/Ajax/%E4%BB%A3%E7%A0%81/9.2/02%E6%B5%8B%E8%AF%95XMLHttpRequest%E5%AF%B9%E8%B1%A1.html');//调用XMLHTTPRequest对象的send()方法 将客户端需要发送的数据发送给服务器//send方法//如果不传递任何内容时  向方法的参数为nullxhr.send(null);//利用XMLHTTPRequest对象的onreadystatechange事件  监听服务器的通信状态  xhr.onreadystatechange = function(){//监听通信状态//XMLHTTPRequest对象的readyState属性 表示服务器的通信状态  值为0 1 2 3 4//0是未初始化 就是没有调用open  1是open方法被调用   2是send方法被调用 //3是正在返回、响应   4是响应完毕if(xhr.readyState === 4){//服务器端的通信状态中  会存在处理完毕的信号 这个时候接受服务器返回的处理结果//XMLHTTPRequest对象的responseText属性 用于接收服务器的响应结果console.log(xhr.responseText);}}//把这些接收到的结果更新到HTML页面上})
</script>
</html>

实现Ajax异步交互相关推荐

spring mvc 和ajax异步交互完整实例
2019独角兽企业重金招聘Python工程师标准>>> Spring MVC 异步交互demo: 1.jsp页面: <%@ page language="java&q ...
Ajax异步交互与跨域访问（三）JQuery中的Ajax
jQuery中的Ajax 一.jQuery提供的六个Ajax操作方法 1.load()方法 $element.load(url,[data],[callback]) 参数: url:异步请求的HTML ...
【Ajax异步交互与跨域访问】Json数据格式
一. JSON是什么 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSON是独立于任何语言的文本格式,易于程序员阅读和编写,同时易于计算机解析和生成 J ...
ajax如何做到异步交互,1.ajax简单实现异步交互
效果:点击获取信息 testAjax.jsp: pageEncoding="UTF-8"%> Insert title here function getName(){ va ...
Ajax同步交互与异步交互
Ajax同步交互与异步交互同步交互是什么所谓同步交互,就是指发送一个请求,需要等待返回,然后才能够发送下一个请求.同步交互相当于排队,轮到下一个的情况会因为前一个而有所不同. 说明:同步交互就是第 ...
【基于SSH框架的个人博客系统05】ajax异步通讯技术与json交互
注意:本项目为博主初学Web开发时所写,所使用的方法都比较笨,不符合主流开发方法.例如,包管理应该使用Maven进行管理而不是手动导入,对前端后端代码的架构也并不是很清晰.大家学习思想即可,可以不用浪 ...
使用原生Ajax技术实现异步交互
实现原理使用原生原生Ajax技术实现异步交互,就是使用Ajax的原生异步对象XMLHttpRequest,来进行创建对象.绑定事件.初始化数据.发送数据的操作过程. 实现步骤第一步,利用XMLHt ...
Ajax 数据异步交互
#1.Ajax简介AJAX = 异步 JavaScript 和 XML.AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在 ...
ajax_异步交互-get/post方式
Ajax的异步交互: 客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做任何其他事情(不等). 实现Ajax的异步交互步骤(举例说明): get方式: 1.创建XMLHttpReq ...

实现Ajax异步交互

实现Ajax的执行步骤

实现Ajax异步交互相关推荐

最新文章

热门文章