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

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 的基本用法

  1. 创建 XMLHttpRequest 对象

    语法:var myAjax=new XMLHttpRequest();
    老版本的 IE(IE5 和 IE6)使用 ActiveX 对象:
    var myAjax=new ActiveXObject("Microsoft.XMLHTTP");

  2. 向服务器发送请求:使用open() 和 send() 方法:
    • open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
      1. method:请求的类型;GET 或 POST
      2. url:文件在服务器上的位置
      3. sync:true(异步)或 false(同步)
    • send(string):string:仅用于 POST 请求
  3. 服务器响应

    如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

    • responseText 属性:responseText 属性返回字符串形式的响应
    • responseXML 属性:如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性
  4. 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基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据)

上一篇:CONTAINING_RECORD 宏


下一篇:RESTful API 设计最佳实践