js进阶ajax基本用法（创建对象，连接服务器，发送请求，获取服务器传过来的数据）

一、总结

1、ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法：open()，send()

2、ajax对象XMLHtmlRequest对象的三个重要属性：a、onreadystatechange b、readyState c、status d、responseText e、statusText

3、onreadystatechange判断状态改变属性的使用： myajax.onreadystatechange=function(){}

4、ajax使用四个步骤（详细看下面代码）：

a、创建XMLHttpRequest对象
b、open()方法连接服务器
c、send()方法发送请求给服务器
d、onreadystatechange属性连接函数以接收responseText属性从服务器返回的数据

二、js进阶ajax基本用法

准备工作

配置本地服务器环境，这里推荐安装：phpstudy，优点：一次性安装，无须配置即可使用，非常方便

Ajax 简介

什么是 Ajax ？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

Ajax 的基本用法

创建 XMLHttpRequest 对象
语法：var myAjax=new XMLHttpRequest();
老版本的 IE（IE5 和 IE6）使用 ActiveX 对象：
var myAjax=new ActiveXObject("Microsoft.XMLHTTP");
向服务器发送请求:使用open() 和 send() 方法：
- open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
  1. method：请求的类型；GET 或 POST
  2. url：文件在服务器上的位置
  3. sync：true（异步）或 false（同步）
- send(string):string：仅用于 POST 请求
服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
- responseText 属性:responseText 属性返回字符串形式的响应
- responseXML 属性:如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。
- XMLHttpRequest 对象的三个重要的属性：
  1. onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
  2. readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    1. 0: 请求未初始化
    2. 1: 服务器连接已建立
    3. 2: 请求已接收
    4. 3: 请求处理中
    5. 4: 请求已完成，且响应已就绪
  3. status:200: "OK"/404: 未找到页面

三、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>ajax01</title>

     <script src="ajax.js"></script>

 </head>

 <body>

     <input type="button" id="btn" value="测试按钮">

     <script>

     /*

         兼容IE6，IE5

         if (window.XMLHttpRequest){

             var myajax=new XMLHttpRequest()

         }else{

             var myajax=new ActiveXObject("Microsoft.XMLHTTP");

         }

         */

     var btn=document.getElementById('btn')

     btn.onclick=function (){

         //1.创建Ajax对象

         var myajax=new XMLHttpRequest()

         //alert(myajax) //IE6及其以下版本不支持

         //2.连接服务器

         // open(方法，文件路径，异步传输)

         myajax.open('GET','test1.txt',true);

         //3.发送请求

         myajax.send(null);

         //4.接受返回的数据

         myajax.onreadystatechange=function(){ //1、onreadystatechange属性的使用时连接函数
             if(myajax.readyState==4){ //2、readyState是XMLHttpRequest对象的属性，所以要是对象.属性的方式访问
                 if (myajax.status==200) {

                     alert('成功'+myajax.responseText)  //3、js中+号连接字符串   4、XMLHttpRequest对象的responseText属性获取从服务器返回的数据
                 }else{

                     alert('失败'+myajax.status)

                 }

             }

         }

     }

     </script>

 </body>

 </html>

js进阶ajax基本用法（创建对象，连接服务器，发送请求，获取服务器传过来的数据）

js进阶ajax基本用法（创建对象，连接服务器，发送请求，获取服务器传过来的数据）的更多相关文章

js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）
js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...
js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）
js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...
js进阶ajax函数封装（匿名函数作为参数传递）（封装函数引入文件的方式非常好用）
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递二.js进阶ajax函数封装 ajax1.js function ajax(ur ...
Ajax学习系列——向服务器发送请求
1.如何发送请求? 如果需要向服务器发送请求,我们使用的是XMLHttpRequest对象中的open()和send()方法. var xhr = new XMLHttpRequest();//具体创 ...
在向服务器发送请求时发生传输级错误。 (provider&colon; TCP 提供程序, error&colon; 0 - 远程主机强迫关闭了一个现有的连接。)
用VS2005+SQLSERVER2008开发C/S的程序,程序上线运行一段时间之后发现在某些功能偶尔出现如下的错误: 在向服务器发送请求时发生传输级错误. (provider: TCP 提供程序, ...
【03】AJAX 向服务器发送请求
AJAX 向服务器发送请求创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请 ...
System&period;Data&period;SqlClient&period;SqlException&colon; 在向服务器发送请求时发生传输级错误。 (provider&colon; TCP 提供程序, error&colon; 0 - 远程主机强迫关闭了一个现有的连接。) &period;
今天使用sql server 2008 R2管理器,进行SQL查询时,频率非常高的报错: System.Data.SqlClient.SqlException: 在向服务器发送请求时发生传输级错误. ...
AJAX - 向服务器发送请求请求
AJAX - 向服务器发送请求请求 XMLHttpRequest 对象用于和服务器交换数据.直线电机生产厂家向服务器发送请求如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 ...
ajax-向服务器发送请求
ajax-向服务器发送请求 1.将请求发送到服务器,使用XMLHttpRequest对象的 open() 和 send() 方法. xmlhttp. open(method,url,async ...

随机推荐

Spring Aspectj切入点语法定义
在使用spring框架配置AOP的时候,pointcut"切入点" 例如定义切入点表达式 execution(* com.sample.service.impl..*.*(..)) ...
开发笔记：用不用UnitOfWork以及Repository返回什么集合类型
这2天实际开发中明确的东西,在这篇博文中记录一下. 之前对是否需要自己封装UnitOfWork有些犹豫,因为Entity Framework就是一个UnitOfWork实现, 自己再封装一下显得有些多 ...
QEMU 使用的镜像文件：qcow2 与 raw
qcow2 的基本原理 qcow2 镜像格式是 QEMU 模拟器支持的一种磁盘镜像.它也是可以用一个文件的形式来表示一块固定大小的块设备磁盘.与普通的 raw 格式的镜像相比,有以下特性: 更小的空间 ...
Ioc和Aop扩展--多种方式实现依赖注入(构造注入,p命名空间注入,集合类型注入,注入null和注入空值)
构造注入语法: <constructor-arg> <ref bean="bean的id"/> </constructor-arg> 1 ...
struts2 查找总结
0:38 2013/5/25 查找 * * |-_-查找全部 Action层的home方法中的查找方法创建时不需要带个查找对象的参数 service层不用组织条件 dao层一条查询所有的hql语句S ...
设置background属性使用selector的时候内置&quest;attr报错的解决方案
当我们设置background属性的时候可以设置background="@color/black" 也可以设置 background="@drawable/selecto ...
聚类-K均值
数据来源:http://archive.ics.uci.edu/ml/datasets/seeds 15.26 14.84 0.871 5.763 3.312 2.221 5.22 Kama 14.8 ...
namespace------------https&colon;//www&period;cnblogs&period;com/linhaifeng/p/6657119&period;html
PHP支持两种抽象的访问当前命名空间内部元素的方法,__NAMESPACE__ 魔术常量和namespace关键字. 常量__NAMESPACE__的值是包含当前命名空间名称的字符串.在全局的,不包括 ...
[Swift]LeetCode526&period; 优美的排列 | Beautiful Arrangement
Suppose you have N integers from 1 to N. We define a beautiful arrangement as an array that is const ...
封装 vue 组件的过程
首先,组件可以提升整个项目的开发效率.能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发的缺点:效率低,难维护,复用性等问题: 然后,使用Vue.extend方法创建一个组件,然后使用 Vue ...