原生 ajax实战

最新推荐文章于 2023-07-22 23:58:22 发布

旺仔奶牛

最新推荐文章于 2023-07-22 23:58:22 发布

阅读量133

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/LIKD_DIKL/article/details/110389077

版权

原生ajax

一、认识ajax

1.初识ajax

ajax也是技术名词的缩写：

Asynchronous [a' sInkranas; er] :异步的;

JavaScript : JavaScript语言

And : 和、与

XML：数据传输格式

二、ajax使用

ajax是为了实现在不刷新整个页面的情况下，局部的更新页面的数据
为了实现ajax，W3C组织要求所有浏览器都内置一个XMLHttpRequest对象，这个对象负责实现ajax
功能

2.1 ajax发送get请求

基本语法

html代码

document.querySelector('button').addEvenListener('click',function(){

// 创建对象

 var xhr=new XMLHttpRequest() 

// 配置要请求的地址和请求方式 xhr.open('get','03get.php')

 // 发送请求 

xhr.send()

})

php 代码

<?php

echo 'hello';

总结：

send 方法不调用，是不会发送网络请求的
php端使用 echo 方法向客户端返回数据

传递参数

ajax 通过 get 方式发送请求的时候，参数需要写到请求地址的后面，以问号分隔，如果由多个参数，中间使用 & 分隔

xhr.open('get','03get.php?id=5&title=明天就要放假了')

php 端通过 $_GET 的方式获取

<?php
echo $_GET['title'];

ajax获取服务端返回值、

xhr.onreadystatechange = function () { 

/* readyState 属性的值等于4，表明依次完整的ajax交互完成， xmlhttprequest 对象会自动的将服务器端返回的信息放到 responseText 属性中 */ 

if(xhr.readyState==4){ 

console.log(xhr.responseText); 
	} 

}

总结

onreadystatechange 事件一定要写到 send 方法前面
readyState 属性的值为4的时候才可以从 responseText 属性中拿到服务求的返回值
php 通过 echo 方法向客户端返回数据，返回的数据只能是字符串类型

2.2 ajax发送post请求

ajax发送post请求需要注意：

将open方法的第一个参数改为post
传递的参数不能放到地址后面，而是放到send方法的参数中，格式与get请求一样
以Post方法传递参数，一定要使用setRequestHeader方法设置请求头
php端使用$_POST获取数据

html代码

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

<button>ajax请求</button>

<script>

  document.querySelector('button').addEventListener('click',*function*(){})

  //创建对象

  *var* xhr=new XMLHttpRequest()

  //配置请求的地址和请求方式

  xhr.open('post','post2.php ')

  xhr.onreadystatechange=*function*(){

    //readyState 属性的值等于4，表明依次完整的ajax交互完成，

    if(xhr.readyState==4){

      console.log(xhr.responseText);

    }

  }

  //发送合适的请求头信息

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

  //发送请求 send不调用，不会发送网络请求

  xhr.send('id=5&title=今天上一天班，太爽了')

</script>

</body>

</html>

php代码

 <?php

echo $_POST['id']; 

  ?>

2.3 form表单与ajax比较

相同点:两者都可以用于提交数据.
不同: ajax 还可以获取数据.

使用ajax可以将html代码与php代码分离开来

2.4 ajax验证用户名

html代码

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

<div>

  <label for="">用户名</label>

  <input type="text" id="username">

  <span id="userinfo"></span>

</div>

<div>

  <label for="">密码</label>

  <input type="text" id="password">

</div>

<div>

  <label for="">邮箱</label>

  <input type="text" id="email">

</div>

<div>

  <label for="">电话</label>

  <input type="text" id="tell">

</div>

<input type="button" id="btn_save" value="注册">

<script>

  document.querySelector( ' #username ' ) . addEventListener( 'blur', *function* () {

  //创建对象

  *var* xhr = new XMLHttpRequest()

  //配置请求方式和请求地址

  xhr.open('get'，' checkUser.php?user=' + this.value)

  xhr . onreadystatechange = *function* () {

    if (xhr.readyState == 4) {

      if (xhr.responseText == 'ok') {

        document.querySelector( ' #userinfo' ).innerHTML = '恭喜你，可以使用'

        document.querySelector( ' #userinfo' ).style.color= ' green'

      } else (
        document.querySelector( ' #userinfo' ).innerHTML = ' 用户名已经被占用'

        document.querySelector( ' #userinfo' ).style.color= ' red'

      }

    }

  }

  //发送

  xhr.send()

  })

</script>

</body>

</html>

<?php
Susername=$_ GET['user'];
if($username== ' onlifes'){
echo 'no';
}else{
echo 'ok' ;
}

2.5 登录

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>

<div>

<label for="">用户名</label> 

<input type="text" id="username"> 

</div> 

<div>

<label for="">密码</label> 

<input type="text" id="password">

</div> 

<div>

<input id="btn_login" type="button" value="登录"> 

<span id="error"></span> 

</div> 

<script> 

var btn_login = document.querySelector('#btn_login') 

var error=document.querySelector('#error') 

btn_login.addEventListener('click', function () { 

// 获取用户输入的用户名和密码 

var username=document.querySelector('#username').value 

var password=document.querySelector('#password').value 

/*

单击按钮时，向 server.php 发送一个 ajax 请求 

将用户输入的用户名和密码发送给 server.php，server.php 

再去数据库中进行验证，根据验证结果返回信息 

*/

// 创建对象 

var xhr=new XMLHttpRequest() 

// 配置请求的地址和请求方式 

// 参数传递使用键=值的方式，键的名称随意命名 

xhr.open('get',`server.php?u=${username}&p=${password}`) 

// 为 xhr 注册事件，服务器返回数据的时候此事件会执行，并能够拿到服务器 

// 返回的数据 

xhr.onreadystatechange=function(){ 

if(xhr.readyState==4){ 

if(xhr.responseText=='ok'){ 

// 跳转到 home.html 

window.location.href='home.html' 

}else{

error.innerHTML='用户名或密码失败' 

} 

} 

}

// 发送请求 

xhr.send() 

}) 

</script> 

</body> 

</html>

php 代码

<?php 

$username=$_GET['u']; 

$password=$_GET['p']; 

if($username=='admin' && $password=='admin'){ 

echo 'ok'; 

}else{

echo 'no'; 

}

三、ajax对象

3.1 获取对象

基于W3C标准浏览器：

var xhr = new XMLHttpRequest();

基于IE内核的浏览器：

var xhr = new ActiveXobject('Microsoft.XMLHTTP');

3.2 ajax对象的属性、方法*

3.2.1属性

readyState: Ajax状态码*

0:表示对象已建立,但未初始化,只是new成功获取了对象,但是未调用open方法
1:表示对象已初始化，但未发送，调用了open方法，但是未调用send方法
2:已调用send方法进行请求
3:正在接收数据(接收到-部分)，客户端已经接收到了一部分返回的数据
4:接收完成，客户端已经接收到了所有数据*

status : http响应状态码
200代表成功获取服务器端数据
404未找到页面等等…
statusText : http响应状态文本
responseText:如果服务器端返回字符串,使用responseText进行接收
responseXML :如果服务器端返回XML数据，使用responseXML 进行接收
onreadystatechange:当readyState状态码发生改变时所触发的回调函数

3.2.2 方法

open(method,url,[aycs]):初始化Ajax对象(打开)
method:http请求方式，get/post
url:请求的服务器地址
aycs:同步与异步
setRequestHeader(header,value):设置请求头信息
header :请求头名称
value :请求头的值
xhr.getAllResponseHeaders()获取全部响应头信息
xhr.getResponseHeader(‘key’)获取指定头信息
send([content]):发送Ajax请求
content:如果是get请求时,此参数为null;
如果是post请求时，此参数就是要传递的数据

注意:所有相关的事件绑定必须在调用send(方法之前进行.

四、Ajax框架的封装

如果一个页面中有十几个地方用到Ajax,那么我们需要写十几次open0、十几次send()、十几次获取xhr
对象;
代码重复相当多，而凡是有代码重复的地方,就有封装的可能;

创建新文件: ajax.js

五、获取Ajax的返回值

前台调用：

修改ajax.js

$.get = function(ur1, callback){
var xhr = $.initO; //调用init,获取ajax对象
xhr . onreadys tatechange = function(){
if(xhr. readyState == 4){
callback(xhr. responseText);
}
xhr. open('get' ,ur1);
xhr . send(;
}

旺仔奶牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生 ajax实战

原生ajax一、认识ajax1.初识ajaxajax也是技术名词的缩写：Asynchronous [a' sInkranas; er] :异步的;JavaScript : JavaScript语言And : 和、与XML：数据传输格式二、ajax使用ajax是为了实现在不刷新整个页面的情况下，局部的更新页面的数据为了实现ajax，W3C组织要求所有浏览器都内置一个XMLHttpRequest对象，这个对象负责实现ajax功能2.1 ajax发送get请求基本语法html
复制链接

扫一扫