浅析ajax原理与用法

时间：2021-02-10 07:38:50

1 ajax原理

	Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建

动态网页的技术,目的是显示动态局部刷新.通过XMLHttpResponse对象来向服务器发起异步请求,从服务器获取数据.

(1) 异步的javascript: 使用javaScript语言及功能向服务器发起请求,当服务器处理完请求之后,自动执行

javaScript回调函数.(客户端可以不需要等到服务器响应才能运行)

(2) XML是一种标记语言,是ajax与后台交互传输数据格式之一

(3) ajax只能向同源网站发起Http请求(端口,协议,域名都相同),跨域请求会报错

利用Ajax可以实现:

1 注册时,输入用户名自动检测该用户是否存在

2 登录时提示密码用户名错误

3 页面局部进行更新数据

2 XMLHttpResponse基本属性

(1) onreadystatechange  每次状态改变所触发事件的时间处理程序

(2) responseText  从服务器响应返回字符串形式数据

(3) responseXML   从服务器响应返回以XML（DOM兼容文档）数据对象

(4) response      从服务器返回对象:如json对象

(5) timeout  表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止

附: response类型由XMLHttpRequest.responseType属性的值决定

	'':           字符串

	'document':   Document对象

	'json':       json对象(django中间件解析)

	'text':       字符串

	'blob':       Blob对象,适合读取二进制文件

var ajax = new XMLHttpRequest();

ajax.open('GET', 'http://www.example.com/page.php', true);

var data = ajax.responseText;

data = JSON.parse(data);   将json字符串转json对象

var last=JSON.stringify(obj)   将json对象转字符串

3 ajax状态码

200, OK，访问正常

301, Moved Permanently，永久移动

302, Move temporarily，暂时移动

304, Not Modified，未修改

307, Temporary Redirect，暂时重定向

401, Unauthorized，未授权

403, Forbidden，禁止访问

404, Not Found，未发现指定网址

500, Internal Server Error，服务器发生错误

4 设置监听接口

onloadstart  请求发出

onprogress   正在发送和加载数据

onerror      请求失败

onload       请求成功完成

ontimeout    用户指定的时限到期，请求还未完成

onloadend    请求完成，不管成果或失败

5 ajax解析

  • 第一步，创建ajax对象
    • 高级浏览器，包括火狐、chrome、opera，ie7以上
      var xhr = new XMLHttpRequest();

  • 使用XMLHttpRequest对象的open创建请求

    /*参数说明：

      method：该参数用于指定HTTP的请求方法，一共有get、post、head、put、delete五种方法

              ，常用的方法为get和post。

      URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。

           该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php（在传回响应之前，能够在服务器上执行任务）。

      flag：该参数为可选参数，参数值为布尔型。该参数用于指定是否使用异步方式。

            true表示异步方式、false表示同步方式，默认为true。

      name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。

      password：该参数为可选参数，用于输入密码。

      XMLHttpRequest.open(method,URL,flag,name,password);
  xhr.open('get','2.py?username=tom&pwd=123');

  • 如果是get请求，参数需要附加到url里

  • 第三步，发送请求

    • 如果是get请求，send参数可以为空；
    • 如果为post请求，参数必须在send参数中传递，参数格式和url中设置的一样
    • 如果为post方式需要在send前，设置请求头信息：xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    //get方式

      xhr.send(null);

      //post方式

      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

      xhr.send('username=tom&pwd=123');
  • 第四步，监听Ajax状态变化

    向服务器发送请求的目的是为了获得服务器端的数据，要获得服务器端返回的数据，需要监听XMLHttpRequest的状态，每当XMLHttpRequest状态发生改变时，会触发事件onreadystatechange，我们可以编写onreadystatechange事件处理函数，获取服务器返回的数据。
    • XMLHttpRequest对象的状态，可以通过属性readyState获取，公有以下5种状态：
    - 0: 请求未初始化

    - 1: 服务器连接已建立

    - 2: 请求已接收

    - 3: 请求处理中

    - 4: 请求已完成，且响应已就绪
  • 当readyState值为4时，就可以获取返回数据了，但返回的数据是成功还是失败，需要根据http的状态码确定，XMLHttpRequest的status属性用于判断http的状态，200表示访问成功
        xhr.onreadystatechange = function () {

            if (4 == xhr.readyState) {

        		if (200 == xhr.status ) {

        			alert(xhr.responseText);

        		}

        	}

        };
  • 第五步，获取响应数据
    • 可以通过XMLHttpRequest对象的responseText获取数据，现在已经不再使用responseXML获取数据了
    • 客户端获取json数据
 xhr.onreadystatechange = function () {

      	if (4 == this.readyState && 200 == this.status) {

      		//1.通过eval将json字符串转换为对象

      	   // var obj = eval('('+xhr.responseText+')');

      	   // console.log(obj);

      	   //2 使用json.parse将json字符串转换为对象

      	   obj = JSON.parse(this.responseText);

      	   console.log(obj);

      	}

      };
  • JSON字符串和JSON对象的转换
        //json字符串 ==> json对象

        var obj = JSON.parse(json字符串);

        //或者

        var obj = eval('(' + json字符串 + ')');

        //json对象转json串

        var str=obj.toJSONString();

        //或

        var str=JSON.stringify(obj);

6 原生javascript中ajax

{1}  同步ajax请求,get请求:

#定义一个触发函数fresh_code

function fresh_code() {

        let xhr = new XMLHttpRequest()

        xhr.open('get', '/api/v1/regist_code', false);  false代表同步,true代表异步请求

        xhr.send()

        let regist_code = xhr.responseText

        // 把注册码写到regist_code标签中

        let regist_code_span = document.getElementById('regist_code')

        regist_code_span.innerHTML = regist_code

    } 

{2}  异步ajax请求,get请求:

var xhr = new XMLHttpRequest();

// 指定通信过程中状态改变时的回调函数

xhr.onreadystatechange = function(){

  // 通信成功时，状态值为4,状态码为200

      if (xhr.readyState === 4 && xhr.status === 200) {

 		//xhr.response指接收到的responseText字符串

          var data=JSON.parse(xhr.responseText);

          console.log(data)

	}

      else {

      console.error(xhr.statusText);

    }

  }

};

xhr.onerror = function (e) {

  console.error(xhr.statusText);

};

// open方式用于指定HTTP动词、请求的网址、是否异步

xhr.open('GET', '/endpoint', true);

// 发送HTTP请求

xhr.send(null);

{3}  同步ajax请求,post请求

var name = encodeURI("北京西");

var data = "username=" + name + "&password=123";

//调用send()函数

send(data);

function send(arg) {

  //调用创建对象函数

  CreateXMLHttpRequest();

  xmlhttp.onreadystatechange = callhandle;

  //get写法(请求方式,url,同步或异步)直接拼接到url,发送

  //xmlhttp.open("GET","Default.aspx?goback=yes&arg=" + arg,true);

  //post写法(请求方式,url,同步或异步),需要额外设置请求头

  xmlhttp.open("POST", "http://172.16.5.25:9011/dynamicStation/loginByAdmin", true);

  //设置content-type类型

  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");

  xmlhttp.send(arg);

}

function CreateXMLHttpRequest() {

  #创建xmlhttp对象,进行判定

  if (window.ActiveXObject) {

    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

  }

  else if (window.XMLHttpRequest) {

    xmlhttp = new XMLHttpRequest();

  }

}

7 jquery中ajax

$.ajax({

	#请求方式

	type:'get',

	url:'/studentsinfo',

	#请求格式为json

	dataType:'json',

	#处理函数

	success:function(data,status){

		console.log(data)

		var d=data['data']

		for(var i=0;i<d.length;i++){

			document.write('<p>'+d[i][0]+'</p>')

		}

   }

})

也可以直接使用$get  或者  $post 基本类似ajax的调用,只是在请求方式这块不用指定,原理一致!!

今天就分享到这了,喜欢的小伙伴可以点下推荐哦!!非常感谢!!

相关文章