Cookie, cookie encapsulation, cookie deletion, synchronization and asynchrony, Ajax,Ajax writing steps

Keywords: html5

cookie: session tracking technology, which is a variable stored on the visitor's computer

Set cookie s:

document.cookie = "key=value";

The use of cookie s must have a server;

Get cookie: the obtained data is a key value pair string

The two strings are separated by semicolons and spaces

Session level cookie

The life cycle of cookie s: that is, the time when data is saved on the browser

document.cookie = "key=value;expires =" + standard date object;

Encapsulation of cookie s

//Get cookie
function getCookie(key){
	let strCookie = document.cookie;
	let arrCookie = strCookie.split("; ");
	for(let i=0; i<arrCookie.length;i++){
		let item = arrCookie[i].split("=");
		if(item[0] == key){
			return item[1];
		}
	}
	return '';
}

//setCookie
function setCookie(key,value,day){
	if(day == undefined){
		document.cookie = `${key}=${value}`;
	}else{
		let date = new Date();
		date.setDate(date.getDate()+day);
		document.cookie = `${key}=${value};expires=`+date;
	}
}
//delCookie
function delCookie(key){
	setCookie(key,'',-1);
}

cookie deletion

Cookies are not deleted directly, but can only be deleted laterally (emphasizing long life cycle)
a. Set the value of key to ''
b. Set expires to - 1

The two methods operate together

let date = new Date();
	date.setDate(date.getDate()+5);	
	document.cookie = "name=laowang;expires="+date;
	
	document.cookie = "name='';expires=-1";

Synchronous and asynchronous

Synchronization: step by step,
Asynchronous: when encountering code that needs to wait or consume time, skip the task and execute subsequent tasks first,
Until the asynchronous code consumes time, execute it again
Classification of asynchronous Codes:
a. Timer
b. Event body

 document.onclick = function(){//synchronization
            console.log("heihei");//asynchronous
       }

   c. Send request receive response

   When synchronous code and asynchronous code appear Synchronous before asynchronous

Ajax

Ajax (Asynchronous JavaScript And XML), (asynchronous) JavaScript and XML), Chinese Name: Ajax. It refers to a web development technology for creating asynchronous interactive web applications.

* AJAX is a technology that can update some web pages without reloading the whole web page

* Through a small amount of data exchange with the server, AJAX can make web pages update asynchronously. This means that a part of a web page can be updated without reloading the whole web page. Traditional web pages (without Ajax) must reload the whole web page if they need to update the content.

*Why use AJAX

* More natural and smooth user experience and immediate response to user operations

* Communicate with the Web server without interrupting user operations

* More sensitive response to user access and achieve interaction effects similar to desktop applications

* Reduce network traffic and improve network efficiency by locally updating pages

Writing steps of Ajax

<script>
	//1. Pull out the phone -- > create XMLHttpRequest object
	let xhr = new XMLHttpRequest();
	//2. Dial -- > call the open method
	//xhr.open("request method: get/post", "server address", asynchronous or not);
	xhr.open("get","5ajaxStep.txt",true);
	//3. Launch -- > call the send method
	xhr.send();
	//4. Wait
	xhr.onreadystatechange = function(){
		//     Answer the phone
		if(xhr.status == 200 && xhr.readyState == 4){
			//5. Feedback information
			//Information returned by responseText
			fun(xhr.responseText);
		}
	}
	
	function fun(resText){
		console.log(resText);
	}
</script>

case

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text"/><span></span>
	</body>
</html>
<script>
	let oText = document.querySelector("input");
	
	oText.onblur = function(){
		let xhr = new XMLHttpRequest();
		//get parameters: URL? Key1 = value1 & key2 = Value2
		xhr.open("get","6ajaxGet.php?userName="+this.value,true);
		xhr.send();
		xhr.onreadystatechange = function(){
			if(xhr.status==200 && xhr.readyState==4){
				fun(xhr.responseText);
			}
		}
	}
	
	function fun(resText){
		// let oSpan = document.querySelector("span");
		
		// oSpan.innerHTML = resText;
		
		//Front and rear end separation
		let oSpan = document.querySelector("span");
		let str = resText.trim();
		if(str == "1"){
			oSpan.innerHTML = "Can register";
		}else if(str == "0"){
			oSpan.innerHTML = "Can register";
		}
	}

<?php
	header("Content-type:text/html;charset=utf-8");
	
	$name = $_GET["userName"];
	
	$conn = mysql_connect("localhost","root","root");
	
	mysql_select_db('2109');
	
	$result = mysql_query("select * from student where stu_name = '$name'",$conn);
	
	if(mysql_num_rows($result) == 1){
		// In the php files involved in ajax related operations,
		// echo is the keyword that returns the influence
		echo 1;
	}else{
		echo 0;
	}
	
	mysql_close($conn);
?>

Posted by cage on Tue, 14 Sep 2021 21:38:19 -0700

Programmer Group